Log in

View Full Version : Highlight current page


Peter Johnson
07-05-2007, 04:21 PM
I am trying to have a page that will highlight - in the navigation bar - the page you are currently on. What I want is a javascript that will extract the page's URL as a string, and if it matches the url in the href, it will apply the class .current to it.

I found a way that looks like it should do exactly this, at http://blog.richnetapps.com/index.php?p=23&more=1&c=1&tb=1&pb=1 and it seems like it should work, but... it doesn't.

Can anyone tell me what I've done wrong? Thanks. BTW, I've also tried calling the script in a onload function, but it still didn't work.



<html>
<head>
<style>
.current {background-color:red;}
</style>

</head>
<body>

<script language="text/javascript">
function extractPageName(hrefString)
{
var arr = hrefString.split('.');
arr = arr[arr.length-2].split('/');
return arr[arr.length-1].toLowerCase();
}

function setActiveMenu(arr, crtPage)
{
for(var i=0; i < arr.length; i++)
if(extractPageName(arr[i].href) == crtPage)
{
arr[i].className = 'current';
arr[i].parentNode.className = 'current';
}
}

function setPage()
{
if(document.location.href)
hrefString = document.location.href;
else
hrefString = document.location;

if (document.getElementById('navbar')!=null)
setActiveMenu(document.getElementById('navbar').getElementsByTagName('a').extractPageName(hrefString));
}
</script>

<div id="navbar">
<a href="one.htm">one</a>
<a href="two.htm">two</a>
<a href="three.htm">three</a>
</div>

<script language="text/javascript">setPage()</script>
</body>
</html>
Trinithis
07-05-2007, 04:39 PM
Put this at the bottom of your page (or after your nav or whatever):


<script type="text/javascript">

var anchors = document.getElementsByTagName("a");
var uri = encodeURI(window.location.href).toLowerCase();
for(var i=0, n=anchors.length; i<n; ++i) {
if(uri==encodeURI(anchors[i].href).toLowerCase()) {
anchors[i].style.className += " current ";
break;
}
}

</script>
Peter Johnson
07-05-2007, 05:28 PM
Thank you for the fast reply. I tried that, saved the page as one.htm, but it's still not turning the link for one.htm red. Any idea why not?



<html>
<head>
<style>
.current {background-color:red;}
</style>
</head>
<body>
<div id="navbar">
<a href="one.htm">one</a>
<a href="two.htm">two</a>
<a href="three.htm">three</a>
</div>
<script type="text/javascript">
var anchors = document.getElementsByTagName("a");
var uri = encodeURI(window.location.href).toLowerCase();
for(var i=0, n=anchors.length; i<n; ++i) {
if(uri==encodeURI(anchors[i].href).toLowerCase()) {
anchors[i].style.className += " current ";
break;
}
}
</script>
</body>
</html>
Peter Johnson
07-05-2007, 06:05 PM
OK, I just got it to work by changing the third from last line from

anchors[i].style.className += " current ";

to

anchors[i].className += " current ";


But I would have thought that the first way was correct. Any ideas why it works without the .style. ??
Trinithis
07-05-2007, 06:19 PM
Oops, yeah, it should be without style.

The reason is that the class attribute is placed in the tag itself, not directly into the style. For example:


<div class="current">...</div>

vs.


<div style="class:current;">...</div>

See the difference?
Peter Johnson
07-05-2007, 07:05 PM
That makes sense. Thank you again.
agallo33
10-03-2008, 09:27 PM
Luckily I was able to find this post because I currently have the code in the post working. However, I am curious how you would set a default highlight tab for my index page when users first come to my site?

Currently when you go to my domain none of the pages are listed as active. I assume this is because index.php is hidden in the url initially?

I've hit a wall on this one and really appreciate any thoughts on this!
bitsy
02-14-2011, 09:53 PM
Hi agallo33 - did you get a solution for this problem - two years ago + !
I have similar problem - all highlighted except index ?
bitsy
02-14-2011, 09:55 PM
Hi Trinithis,
The javascript for the bottom of the page makes the rest work a treat. Any ideas re getting the index page to highlight too? It's in the navigation as well as header.
thanks in advance.