Active Styles extension

Version 1.01

The Active Styles extension allows you to vary the appearance of links when they're pressed.

View the demo to see it in action. The script adds the class name "active" to links when they're pressed, which you can use to apply additional styling.

Installation

Download the Active Styles script, copy it into your udm-resources folder, and add the script include to the body section:

<!-- active styles extension -->
<script type="text/javascript"
	src="/udm-resources/udm-x-active.js"></script>

You can then define as much or as little CSS as you want to vary the styling of active links, using the class name "active". Remember that you're not defining their appearance from scratch, you're modifying the appearance of links which are otherwise in their rollover state.

In the active styles demo I used raised borders for the rollovers, and then depressed borders in the active styles, to give the appearance of buttons. I also added text-indent to re-inforce that illusion. I have two different menu styles, so it takes three sets of rules to acheive that - for the navbar, default menu, and orange menu styles:

/* active styles */
#udm a.active {
	border-color:#cb9963 #feecb6 #feecb6 #cb9963;
	text-indent:1px;
	}

#udm ul a.active {
	border-color:#060 #cec #cec #060;
	text-indent:1px;
	}

#udm ul li.orangeMenuItem a.active {
	border-color:#ba8852 #fedca6 #fedca6 #ba8852;
	}

You can see another example of this extension in use with the Chocolate Bar demo.

Why not just use :active?

Support for the :active pseudo-class is not included by default because Internet Explorer's implementation of it is wrong - it should apply to links when they're pressed, and not when they're released, but instead IE applies it to links when they have the focus.

As a happy side-effect, this means that :active can be used to simulate the :focus pseudo-class, which IE doesn't otherwise support. But this does of course mean that a pure-CSS implementation of active styles is not possible. Hence the reason for this extension.

Browser notes

You might find that in early Mozilla builds the active class occasionally "sticks" - it doesn't reset onmouseup. Since active styles are only applied to a link just before it's about about to be followed, the only time you're likely to notice is with links to anchors on the same page.


Search

We would like your feedback! Take the UDM4 Survey!

UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.

-