Matching urls on a page

**mickymoo** · Mar 27, 2007 05:48

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

**Pepejeria** · Mar 27, 2007 08:57

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.

**mickymoo** · Mar 27, 2007 09:02

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

**Pepejeria** · Mar 27, 2007 09:09

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.

**jimfraser** · Mar 27, 2007 10:28

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>

**mickymoo** · Mar 28, 2007 03:38

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

**jimfraser** · Mar 28, 2007 09:05

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";
			}
		}
	}
}

**mickymoo** · Mar 28, 2007 09:18

That's done the trick. Thanks, Jim. You're a star!

Mike

User Tag List

Thread: Matching urls on a page

Thread Tools

Display

Matching urls on a page

Bookmarks

Bookmarks

Posting Permissions