SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot imouto's Avatar
    Join Date
    Sep 2004
    Location
    Gotham
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

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

    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.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can style the links using css.

    using a:active you can style the selected link.


  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adjust your code as follows.

    Code:
    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.

  4. #4
    SitePoint Zealot imouto's Avatar
    Join Date
    Sep 2004
    Location
    Gotham
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

    Quote Originally Posted by r51 View Post
    Adjust your code as follows.

    Code:
    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.

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I used "internalNav" as an id.
    It should be "internalnav".

  6. #6
    SitePoint Zealot imouto's Avatar
    Join Date
    Sep 2004
    Location
    Gotham
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

    Quote Originally Posted by r51 View Post
    Sorry, I used "internalNav" as an id.
    It should be "internalnav".

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    if (inLinks[i].href.split("#")[1] == id) {
    That should fix the problem.

  8. #8
    SitePoint Zealot imouto's Avatar
    Join Date
    Sep 2004
    Location
    Gotham
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by r51 View Post
    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:
    Code:
    if (inLinks[i].href.split("#")[1] == id) {
    That should fix the problem.

  9. #9
    SitePoint Zealot imouto's Avatar
    Join Date
    Sep 2004
    Location
    Gotham
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r51 View Post
    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)?

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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:
    Code:
    a.currentSection{
      background-color:red;
    }
    Now the style is separated from the behaviour.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •