[thelist] A:Active Working Example?
Kevin Cannon
p+evolt at redbrick.dcu.ie
Mon Feb 24 13:44:01 CST 2003
On Mon, Feb 24, 2003 at 01:06:48PM -0600, Rob Smith wrote:
> There was a topic a few days ago about highlighting the active or currently
> link you're on, but it really wasn't answered to my satisfaction. After
> researching the a:active css property, I realized that this is what happens
> on the press state of the mouse click.
I'm not sureif it was the thread I start but here's something I knocked up
following stuff on this mailing list:
Basically just changes the class of the currentlink you're on to 'currentlink'
_very_ useful for navbars. (:
- Kevin
// JavaScript Highlight Current link.
// Link this js document, then call it in the body tag:
// <body onload="highlightCurrentLink()" >
// Based on Inigo Surguy's version at:
// http://www.surguy.net/menu/highlight.html
// Modified by Kevin Cannon http://www.multiblah.com
// Get's the URL and parses it
function getURL() {
var url = document.location.href;
return parseURL(url);
}
// Strips a URL to just the filename
function parseURL (url) {
var fileName = url.split("/");
fileName = (fileName[fileName.length-1]);
return fileName;
}
// Searches through the doc looking for links
// Only checks the navigation ID
// Changes class of the current link to /currentlink
function highlightCurrentLink() {
var currentLocation = getURL();
var nav = document.getElementById("navigation");
//alert ("currentLocation" + currentLocation);
links = nav.getElementsByTagName("a");
for (i=0; i<links.length; i++) {
linkHref = links[i].getAttribute("href")
linkHref = parseURL(linkHref);
//alert("linkHref" + linkHref);
if (linkHref==currentLocation) {
//alert("link found");
// Set class for different browsers
links[i].setAttribute("className", "currentlink");
links[i].setAttribute("class", "currentlink");
}
}
}
More information about the thelist
mailing list