Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Highlight Current Page 1

Status
Not open for further replies.
tnsbuff

tnsbuff

Technical User
Jan 23, 2002
216
US
Hi,

I'm trying to figure out how I can use javascript and css to change the background of a cell in a navigation table when the link in that cell is the current page being viewed.

I'm thinking something like comparing this.href to document.location, but I'm a newbie and can't get beyond that. :) Can I create a function up in the head that will loop through all of the links and change the id or class depending on if the url's match?

Thanks a bunch for any suggestions!
 
Sort by date Sort by votes
Sure....
Can you post the code for the navigation bar?

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)
 
Upvote 0 Downvote
Hi Chessbot,

I don't have anything yet. I'm just thinking that for my next site I would like to use this technique if it's possible. If you could give me the pseudocode, maybe I could make it work.

Thanks a bunch,
 
Upvote 0 Downvote
Oh, ok...
Say it looks like this:
Code: 
<style type="text/css">
#navigation {
    width: 250px;
    background-color: black;
    text-align: center;
    }
#navigation a {
    display: block;
    width: 220px;
    margin: 0 auto;
    background-color: blue;
    color: white;
    padding: 8px;
    }
#navigation a:hover, #navigation a.current {
    background-color: green;
    }
</style>
...
<div id="navigation">
 <a href="index.html">Home</a>
 <a href="about.html">About Us</a>
 <a href="portfolio/index.html">Portfolio</a>
 <a href="contact.html">Contact Us</a>
</div>
Then your code would look like this:
Code: 
function selectVisited()
{
  var nav = document.getElementById('navigation');
  var links = nav.getElementsByTagName('a');
  var base = "[URL unfurl="true"]http://www.example.com/";[/URL]
  for (var i=0; i<links.length; i++)
  {
    if (base + links[i].href == location.href)
    {
      links[i].className = "current";
      break;
    }
  }
}

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)
 
Upvote 0 Downvote
Great, I can't wait to try this out.

Thanks a million!
 
Upvote 0 Downvote
It would be easier to hard-code it, though...

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)
 
Upvote 0 Downvote
Hmmm, for some reason I can't get it to work. Looking at the code it seems that you would need to call the function somehow, but I've tried using it onLoad and that didn't work. I also tried taking the code out of the function and just placing it within the script tags, but it still doesn't work.

Why do you say it would be easier to hard-code? I want to use it in a navigation file that's included on each page.

Thanks,

 
Upvote 0 Downvote
I mean that if you weren't including it on each page (i.e. copy+pasting each page), it would be better to just give the current page class="current" and not bother with the javascript.

The onload should work.... post the code if it does not.

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)
 
Upvote 0 Downvote
Ok, here's what I have:

Code: 
<html>
<head>
<script language="javascript">
function selectVisited()
{
  var nav = document.getElementById('navigation');
  var links = nav.getElementsByTagName('a');
  var base = "[URL unfurl="true"]http://www.mydomain.com/mytestingdirectory/";[/URL]
  for (var i=0; i<links.length; i++)
  {
    if (base + links[i].href == location.href)
    {
      links[i].className = "current";
      break;
    }
  }
}
</script>

<style type="text/css">
#navigation {
    width: 250px;
    background-color: black;
    text-align: center;
    }
#navigation a {
    display: block;
    width: 220px;
    margin: 0 auto;
    background-color: blue;
    color: white;
    padding: 8px;
    }
#navigation a:hover, #navigation a.current {
    background-color: green;
    }
</style>
</head>
<body onLoad="selectVisited()">
<br><br><br><br>

<div id="navigation">
 <a href="highlight_current.html">Highlight Current Page</a>
  <a href="page2.html">Page2</a> 
</div>
</body>
</html>

Thanks for your help!
 
Upvote 0 Downvote
Woohoo! I figured it out. The problem was with the base. I don't need to add that to the links.href because links.href already contains the full url even though the link as it's written in the code is a relative url.

Thanks so much Chessbot! I've been wanting to be able to do this for a long time. :)
 
Upvote 0 Downvote
No problem, glad it's sorted.

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
361
penguinspeaks
penguinspeaks
chillay
  • Locked
  • Question
Add Control + F feature to a Web Page
Replies
3
Views
368
feherke
feherke
rogerte
  • Locked
  • Question
How to have several datepickers on same HTML page
Replies
1
Views
341
rogerte
rogerte
buckeyeleaf1979
  • Locked
  • Question
need help trying to get another page to display in popup
Replies
0
Views
158
buckeyeleaf1979
buckeyeleaf1979
evr72
  • Locked
  • Question
Execute JavaScript when page loads 1
Replies
3
Views
244
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top