Using Java for current page in css navigation?

[Robert Palmer]

Hey,

Lance had an older topic where he said to use java and
call up the current page. Its an old topic and it won't
allow any additional questions.

I just had to do something like this. The solution I came up with does use j/s to detect the current page, then just assigns an #id to the menu item link that matches the current URI. If j/s or CSS are disabled on the client, the menu still works but the current page isn't highlighted.

Head
function GetCurrentPage() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
var thisPage = location.href;
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
thisHREF = anchor.getAttribute("href");
if ((thisHREF == thisPage) ¦¦ (location.protocol + "//" + location.hostname + thisHREF == thisPage)) {
anchor.id = "Current";
return;
}
}
}

Then in your CSS, add a style for #Current.

HTH

Here's my code: (minus html brackets)

If I add a #current in the external css file how would
I code the nav html in my page. it doesn't appear to be working the way I have it now.
========================================
Java-
script LANGUAGE="JavaScript"
<!--
function GetCurrentPage() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
var thisPage = location.href;
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
thisHREF = anchor.getAttribute("href");
if ((thisHREF == thisPage) ¦¦ (location.protocol + "//" + location.hostname + thisHREF == thisPage)) {
anchor.id = "current";
return;
}
}
}
// -->
/script
/HEAD
---------------------------
CSS-
/************* LEFT NAVIGATION ***************/
#current {
color: #FF0000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical06b.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer { margin-left: 5px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 130px;
color: #191970;
background-color: #99CCFF;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #000080;
border-right: 1px solid #000080;
font-weight: bold;
font-size: 10px;
background-image: url(images/vertical06.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}

#navcontainer a:hover
{
color: #FFF;
background-color: #99CCFF;
text-decoration: none;
border-top: 1px solid #000080;
border-left: 1px solid #000080;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical06a.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
-----------------------------
HTML-
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
<li><a href="#">Item six</a></li>
<li><a href="#">Item seven</a></li>
</ul>
----------------------------------

Thanks,

Robert

[Bernard Marx]

The function was over-complicated. Both the

.href

property and

getAttribute('href')

return the full path.

onload = function(){GetCurrentPage();}
function GetCurrentPage()
{
    if (!document.getElementsByTagName) return;
    var anchors = document.getElementsByTagName("a");
    var locHref = location.href;
    for (var i=0; i<anchors.length ;i++)
        if (anchors[i].href==locHref)
            return anchors[i].id = "current";            
}

However, assigning the

id

is not enough to override the rule:

#navcontainer a

- I'm not exactly sure why. The quick solution is to change the

#current

rule to:

#navcontainer #current