Here's something that some of you might find useful.
I had a client recently who wanted to maintain their site using Dreamweaver. And we do tons of sites with Contribute. The design called for an active state on the menu item, or a css class that shows "you're looking at this page right now". I hate making clients remember to apply styles to a menu item every time they create a new page. Plus, I wanted to use Dreamweaver Templates in this case, because it seemed like a better way to solve the problem - which means that the menu items are not editable on a page-by-page basis, so there's no way to apply the class.
So how to I apply a class to the anchor tag? Javascript and DOM.
Again, this is an acceptable use of Javascript in my mind, because if the method fails, then there is no accessibility issue for the user. They just don't see the pretty colour but all page content is there. Plus you shouldn't rely on colour alone to convey wayfinding! So I assume you've got other methods.
So what we want to do is look through our document and find hrefs that point to the page we're on right now.
First, let's make sure we're on a browser that knows what the DOM is:
function scriptInit() {
if (!document.getElementById) {
return;
}
}
Then let's use that great little event watcher that Scott Andrews made up:
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
}
Next we run our script. First we look to see if our URL has no file specified. For instance http://www.paulbellows.com/getsmart/set_active/. If so, we append our default page name and extension. This is the only part of the script you should need to edit. If not, we just use the URL as is.
function checkActive() {
var a = document.getElementsByTagName("a");
if (window.location.href.substr(location.href.length - 1, 1) == '/') {
var loc = window.location.href + 'index.html';
}
else {
var loc = window.location.href;
}
Once we have our location variable, we run through all anchor tags within the document and see if we have a match. Then we apply our style. The second setAttribute setting makes Internet Explorer work. It doesn't allow you to set class via DOM on an element, only className. Of course all other browsers just ignore this and let it go by harmlessly.
for(var i=0; i < a.length; i++) {
if (a[i].href == loc) {
a[i].setAttribute("class", "active");
a[i].setAttribute("className", "active");
}
}
}
Then we use our Event Listener script to call the function.
addEvent(window, 'load', checkActive, false);
Now we just need to define the style rules for .active.
a {color:#000;}
a:hover {color:#666;}
a.active {color:#f00;}
Now we just need to put some links into our page to see it work:
Of course, because it's a class, you could use different implementations of the style definition for different regions of your page as is below. Or if you wanted, you could specify it to only one section of your page within the Javascript.
This isn't meant to be a fully plug-in-able script, but more a starter sample.
#menu a.active {color:red;}
#content a.active {color:#333;}
#footer a.active {text-decoration:underline;}
note: of course this method is too simple for a dynamic site where all the URLs use query strings and just matching is not possible... but if you're smart enough to have a dynamic site, then you're smart enough to have a more appropriate method to set menu states.