How do I toggle visibility AND highlight navlink of the section user is seeing?

[imouto]

Alright, so I'm a Javascript rookie who's been reading Jeremy Keith's DOMScripting book. I'm using one of the techniques in his book, but can't for the life of me figure out how to highlight the navlink for the section the user is seeing. To see what I mean, check out this test page (taken straight from the book with a slight modification done to the about.js file):

http://www.wuworkshop.com/test/domsters/about.html

When the About page loads, you initially see the content for the Jay Skript section. When you click on "The Domsters", you see the content for that section. Great, perfect, just what I want. But how do I get the Jay Skript link and The Domsters link to be highlighted to show the user what section they're on?

Any help would be greatly appreciated.

[gRoberts]

You can style the links using css.

using a:active you can style the selected link.

[r51]

Adjust your code as follows.

function showSection(id) {
  var divs = document.getElementsByTagName("div");
  for (var i=0; i<divs.length; i++ ) {
    if (divs[i].className.indexOf("section") == -1) continue;
    if (divs[i].getAttribute("id") != id) {
      divs[i].style.display = "none";
    } else {
      divs[i].style.display = "block";
    }
  }
  var inLinks = document.getElementById("internalNav").getElementsByTagName("a");
  for (var i = 0; i < inLinks.length; i++) {
    if (inLinks[i].href == "#" + id) {
      inLinks[i].style.backgroundColor = "red"; // or whatever
    } else {
      inLinks[i].style.backgroundColor = "";
    }
  }
}

This runs through the links in the relevant section. If the href attribute matches the id of the section being shown, the background colour is changed. It would be better to change the className instead and use a stylesheet to control the appearance, but this should get you started.

I hope it works.

[imouto]

Hi r51,

I copied and pasted your code and now the sections don't show up when you click on the links. The background color isn't changing either. Here's the updated page:

http://www.wuworkshop.com/test/domsters/about.html

Adjust your code as follows.

function showSection(id) {
  var divs = document.getElementsByTagName("div");
  for (var i=0; i<divs.length; i++ ) {
    if (divs[i].className.indexOf("section") == -1) continue;
    if (divs[i].getAttribute("id") != id) {
      divs[i].style.display = "none";
    } else {
      divs[i].style.display = "block";
    }
  }
  var inLinks = document.getElementById("internalNav").getElementsByTagName("a");
  for (var i = 0; i < inLinks.length; i++) {
    if (inLinks[i].href == "#" + id) {
      inLinks[i].style.backgroundColor = "red"; // or whatever
    } else {
      inLinks[i].style.backgroundColor = "";
    }
  }
}

This runs through the links in the relevant section. If the href attribute matches the id of the section being shown, the background colour is changed. It would be better to change the className instead and use a stylesheet to control the appearance, but this should get you started.

I hope it works.

[r51]

Sorry, I used "internalNav" as an id.
It should be "internalnav".

[imouto]

Aaah, I should have known. Well, I made the change but the link still isn't being highlighted. =? Any ideas?

http://www.wuworkshop.com/test/domsters/about.html

Sorry, I used "internalNav" as an id.
It should be "internalnav".

[r51]

Yes, the browser is returning the full path for the href attribute, not just #jay or #domsters.
Replace the href if test with the following:

if (inLinks[i].href.split("#")[1] == id) {

That should fix the problem.

[imouto]

Ah! That did it! Dang, I really should have been able to figure that one out. It's quite similar to the prepareInternalnav function from the book. *feels shame* Thanks very much for your help r51! It's too bad I no longer need this now for the project I'm working on. lol. They just completely changed how the nav is gonna work so I don't even need this Javascript anymore. Oh well, at least I learned something new.

Yes, the browser is returning the full path for the href attribute, not just #jay or #domsters.
Replace the href if test with the following:

if (inLinks[i].href.split("#")[1] == id) {

That should fix the problem.

[imouto]

This runs through the links in the relevant section. If the href attribute matches the id of the section being shown, the background colour is changed. It would be better to change the className instead and use a stylesheet to control the appearance, but this should get you started.

Hey r51 (or anyone else that can help answer this question),

Could you elaborate a bit more about changing the className? I'm not quite sure I'm following. Are you adding a class to the anchors within "internalnav" (ie. #jay and #domsters)?

[r51]

function showSection(id) {
  var divs = document.getElementsByTagName("div");
  for (var i=0; i<divs.length; i++ ) {
    if (divs[i].className.indexOf("section") == -1) continue;
    if (divs[i].getAttribute("id") != id) {
      divs[i].style.display = "none";
    } else {
      divs[i].style.display = "block";
    }
  }
  var inLinks = document.getElementById("internalNav").getElementsByTagName("a");
  for (var i = 0; i < inLinks.length; i++) {
    if (inLinks[i].href == "#" + id) {
      inLinks[i].className = "currentSection";
    } else {
      inLinks[i].className = "";
    }
  }
}

You're actually setting the class of the links. However, class is a reserved word in JavaScript so the className property is used instead.

Then, in a stylesheet you'd have the styling for links with class currentSection:

a.currentSection{
  background-color:red;
}

Now the style is separated from the behaviour.