Search Technorati for information relating to the URL or keyword of your choice.
... Original post: blog.scriptdigital.com: Emmanuel M Décarie's weblog on scripting. by at Daypop Search - filter replacement ...
Filter Replacement
You have a navigating menu with links that point to different pages on your web site and you want to set to a different color the current link/page that a user is viewing so it will know from the navigating menu that he/she had arrived to the selected page.
I'll show you an example from my own web site. Here's a picture that show how the navigating menu display when you are on the BBEdit Disk Browser Suite page.
And here's another one that show the navigating menu when you are on BBEditLib page.
As you can see, when the user access the BBEdit Disk Browser Suite page, the link in the navigating menu turn to black.
On my site I use a little Javascript/CSS hack that I called dynmenu.
Here's how it work:
dynmenu listing
(...)
1 <head>
2 <script language="javascript">
3 // set the color of the link to black to show that we are on this page
4 // the element id is between the last slash and the last dot of the path name
5 function dynmenu () {
6 var path = document.location.pathname;
7 var ix_slash = path.lastIndexOf ('/');
8 var ix_dot = path.lastIndexOf ('.');
9 var pathid = path.substring (ix_slash + 1, ix_dot); // get the element id
10 document.getElementById(pathid).style.color = "black"; // set the color to black
11 }
12 </script>
13
14 </head>
15 <body onload="dynmenu ()">
16 <a href="bbeditdiskbrowserscripts.html" id="bbeditdiskbrowserscripts">BBEdit Disk Browser Suite</a><br>
17 <a href="bbeditlib.html" id="bbeditlib">BBEditLib: AppleScript Library</a><br>
(...)
We put in the <head> section of the page the dynmenu javascript. In line 6 we get the current path which is, for example for http://scriptdigital.com/divers/bbeditlib.html, "/divers/bbeditlib.html". What we want is to get only the name of the html file, minus '.html'. For example, we want here 'bbeditlib'. That's what lines 7-9 are doing.
Now if you look at how we have build our links in the example, you will see a CSS ID selector in each links. For example, in line 17, the ID selector have for value "bbeditlib".
Now get back to line 10 in the dynmenu listing. What the script do here is to use the DOM to set the color of the link to black when the current page is equal to the same ID selector as the variable pathid that we have extracted from document.location.pathname.
For this simple hack to work, you to have put in the <body> tag the onload="dynmenu()" as in line 15.