HTML Dog

Skip to navigation

Suckerfish :active

By Patrick Griffiths and Dan Webb.

Okay, so along with :link, :visited and :hover, the other commonly used pseudo-class with links is :active, which applies styles when something is activated, by clicking on it for example. The thing is, that although no particularly useful applications of this spring to mind, you should be able to apply this to any element, not just links:


p:active { color: red; }

But IE, being the web standards thicko that it is, just doesn't get it. What it needs is a swift Suckerfish kick up the back-side:


sfActive = function() {
	var sfEls = document.getElementById("content").getElementsByTagName("P");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmousedown=function() {
			this.className+=" sfactive";
		}
		sfEls[i].onmouseup=function() {
			this.className=this.className.replace(new RegExp(" sfactive\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfActive);

This applies the Suckerfish to all p elements inside an element with the id 'content'.

And so with a little adjustment to the CSS...


p:active, p.sfactive { color: red; }

...you have elements that will pick up styles when they are clicked on.

Examples

Similar to the example in Suckerfish :hover, you could utilise Suckerfish :active to highlight certain words in a paragraph when the paragraph is clicked on.

Erm... if you can think of any other applications, let us know...