SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    London
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Matching urls on a page

    Hi

    I'm a newbie to JavaScript and have a question that I hope someone will be able to answer for me...

    I have a nested list of links in my main navigation (brief outline below):

    Code:
    <ul>
    <li><a href="blah.html">Blah</a></li>
    <li><a href="blah.html">Blah</a>
         <ul>
         <li><a href="blah.html">Blah</a></li>
         <li><a href="blah.html">Blah</a></li>
         </ul>
    </li>
    </ul>
    I have used CSS to make the top level nav link bold for each section of the side I am in (i.e. if I'm in the "Contact" section then all pages in that section will display the contact link as bold).

    I am now trying to do the same with the 2nd level nav (i.e. each page will automatically make the link to itself in the 2nd level nav bold ).

    Is there a way to do this in JavaScript? Do you somehow match the URL of the current page to the URL of the link in navigation and make it bold (or perhaps a different colour)?

    Any help would be much appreciated.

    Thanks
    Mike

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not just apply a css class to it? If you can't, check out jQuery (haven't tested it myself), there you can apply whatever using XPath.

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    London
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pepejeria

    The client is going to be updating the site using design view in Dreamweaver (built using Dreamweaver's templating system). Also the list I added to my previous post was a much simplified version of my actual nav. There are actually loads of links and sub links for each section, so manually adding a class would be quite difficult. If we could automatically add a class to the list item using JavaScript that would be great! Any ideas?

    Thanks
    Mike

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well mickymoo, as I said, check out jQuery. I personally don't know it, but my impression is that its what you are looking for. Somebody already did the hard work, you know just need to learn how to use it.

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at this:
    Code:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function boldNav() {
    	var pageParts = window.location.href.split("/");
    	if (pageParts.length > 0) {
    		var currentPage = pageParts[pageParts.length - 1];
    	} else {
    		var currentPage = window.location.href;
    	}
    	
    	var tags = document.getElementById("navMenu").getElementsByTagName("a");
    	
    	for (var i=0; i < tags.length; i++) {
    		var navParts = tags[i].href.split("/");
    		if (navParts.length > 0) {
    			var currentNav = navParts[navParts.length - 1];
    		} else {
    			var currentNav = tags[i].href;
    		}
    		if (currentNav == currentPage) {
    			tags[i].style.fontWeight = "bold";
    		}
    	}
    }
    
    window.onload = boldNav;
    </script>
    </head>
    <body>
    	<ul id="navMenu">
    	<li><a href="blah.html">Blah</a></li>
    	<li><a href="blah.html">Blah</a>
    	     <ul>
    	     <li><a href="navs.html">Blah</a></li>
    	     <li><a href="blah.html">Blah</a></li>
    	     </ul>
    	</li>
    	</ul>
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Sep 2004
    Location
    London
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jim

    Thanks so much for your help. I have applied the script to my site and it works. Was wondering if you could help me with a modification (I'm still trying to get into JavaScript properly otherwise would have been able to do it myself).

    Modifications I have done:
    1. I have managed to change the script slightly so that it assigns class="selected" to the link instead. This will allow me to assign styles using my stylesheet.

    2. I have also changed the function name to selectLink instead to make it more semantically correct.

    Things I need to modify:
    I only need this to work on the 2nd level nav (the nested list) because I can use CSS for selecting the top level nav. Please can you let me know how to do this.

    Updated script:
    Code:
    function selectLink() {
    	var pageParts = window.location.href.split("/");
    	if (pageParts.length > 0) {
    		var currentPage = pageParts[pageParts.length - 1];
    	} else {
    		var currentPage = window.location.href;
    	}
    	
    	var tags = document.getElementById("nav-main").getElementsByTagName("a");
    	
    	for (var i=0; i < tags.length; i++) {
    		var navParts = tags[i].href.split("/");
    		if (navParts.length > 0) {
    			var currentNav = navParts[navParts.length - 1];
    		} else {
    			var currentNav = tags[i].href;
    		}
    		if (currentNav == currentPage) {
    			tags[i].className = "selected";
    		}
    	}
    }
    
    window.onload = selectLink;
    Thank you so much for all your help so far. I really appreciate it.

    Regards,
    Mike

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This modification should do the trick
    Code:
    function boldNav() {
    	var pageParts = window.location.href.split("/");
    	if (pageParts.length > 0) {
    		var currentPage = pageParts[pageParts.length - 1];
    	} else {
    		var currentPage = window.location.href;
    	}
    	
    	var nestedULs = document.getElementById("navMenu").getElementsByTagName("ul");
    	
    	for (var j=0; j < nestedULs.length; j++) {
    	
    		var tags = nestedULs[j].getElementsByTagName("a");
    	
    		for (var i=0; i < tags.length; i++) {
    			var navParts = tags[i].href.split("/");
    			if (navParts.length > 0) {
    				var currentNav = navParts[navParts.length - 1];
    			} else {
    				var currentNav = tags[i].href;
    			}
    			if (currentNav == currentPage) {
    				tags[i].style.fontWeight = "bold";
    			}
    		}
    	}
    }

  8. #8
    SitePoint Member
    Join Date
    Sep 2004
    Location
    London
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's done the trick. Thanks, Jim. You're a star!

    Mike


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
  •