changing links depending on location

[boggly]

I notice on a lot of Web sites that depending on what page the viewer is on the link(s) and/or image(s) change to affect the location (i.e. grayed out buttons). I was wondering if there was a way--other than hard-coding it--to do this with JavaScript.

-boggly

[Mr J]

There are plenty of effects that you can do with Javascript and CSS combined.

Give us a more specific idea of what you require and we might be able to show you.

[boggly]

Okay, say there's a Web site divided into different sections; depending on what section (page) the viewer is on a certain link (either text or graphic) becomes inactive if it links to the same page the viewer is currently on, giving them a greater sense of placement within the site. I haven't tried messing with this much yet, but was just wondering if it would be possible to do this with a script and/or CSS and if anyone knew how or knows of a place I could find out how.

-boggly

[joh6nn]

theoretically, shouldn't be too hard. in practice, working the bugs out for every browser will be hell.

tools: document.URL, link.href

basic concept: match document.URL against the nav links, find the one that matches, change color, remove link property.

example code:

window.onload = function() {
var url = document.URL;
url = url.slice(url.indexOf(".com/") + 5); //shortens the url to just the path, because the domain name is assumed.
var linkId = url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('.')); //assumes that the navigation links have id attributes that are equal to their file names
for( var i = 0; i < document.links.length; i++; ) {
if ( document.links[i].href == url ) {
document.links[i].onclick = function() {return false; }
document.links[i].style.color = '#CCCCCC':
break; // this stops at the first link it finds that has the same url as this page. if you want it to hit every link that has the same page, remove this line
}
}
}

[Graeme Hackston]

I don't know if this will help because it requires code in the page. It's how I open sub menus onload depending on the page.

John helped me out a while back by showing me how to get a page element.


In an external file:

if (document.getElementById('flag')) {
// do something
}

In the page you want the action:

<AnyElement id="flag"></AnyElement>

[Mr J]

go to

http://www.huntingground.freeserve.co.uk/main/mainfram.htm

have a look at my navbar and see if this is something like what you are after.


Take a look in the "Javascript ref" section and notice the navbar at the top.
The highlighting is different.