SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
Aug 14, 2007, 08:47 #1
- Join Date
- Sep 2004
- Location
- Gotham
- Posts
- 184
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Aug 14, 2007, 09:23 #2
- 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.
-
Aug 14, 2007, 09:27 #3
- 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 = ""; } } }
I hope it works.
-
Aug 14, 2007, 10:18 #4
- 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
-
Aug 14, 2007, 10:30 #5
- 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".
-
Aug 14, 2007, 12:46 #6
- 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
-
Aug 14, 2007, 14:35 #7
- 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) {
-
Aug 14, 2007, 15:39 #8
- 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.
-
Aug 20, 2007, 18:36 #9
-
Aug 20, 2007, 18:47 #10
- 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 = ""; } } }
Then, in a stylesheet you'd have the styling for links with class currentSection:
Code:a.currentSection{ background-color:red; }
Bookmarks