Highlight links

[kurt.santo]

I have changed .htaccess that the pages are displayed without the file extension bit. For someone knowing JavaScript it would probably very easy to have a script to highlight hover and to highlight the current page. Not for Kurt:-( I know that you kind of have to extract the bit after the last /, but this is where it ends... Can anyone help?Kurt

[Synook]

What do you mean by "highlight the current page"? If you mean highlight the links that lead to the current page, then you can do something like

window.onload = function() {	anchors = document.getElementsByTagName("a");	for (i = 0; i < anchors.length; i++) {		if (anchors[i].href == window.location) {			anchors[i].style.backgroundColor = "#FFFF00";			//Any other style changes here		}	}}

[Ingolme]

What do you mean by "highlight the current page"? If you mean highlight the links that lead to the current page, then you can do something like

window.onload = function() {	anchors = document.getElementsByTagName("a");	for (i = 0; i < anchors.length; i++) {		if (anchors[i].href == window.location) {			anchors[i].style.backgroundColor = "#FFFF00";			//Any other style changes here		}	}}

The problem with that is that if the link is <a href="page.htm">Link</a> and the URL is http://www.mydomain.com/folder/page.htm, it's not going to change the link.I would make it more like this:

window.onload = function() {P = window.location.pathname;P = substr(P.lastIndexOf("/")+1);L = document.getElementsByTagName("a");  for(x=0;x<L.length;x++) {	if(window.location.path.indexOf(L.href) != -1) {	  anchors.style.backgroundColor = "#FFFF00";	  // Other style changed here.	}  }}

[kurt.santo]

Guess I kind of didn't explain properly what I am after, thanks for your inputs. Try to be more precise.I would like to style the text-colour of all states but one as blue and the hover as red (via CSS, not a problem). Now, the difficult bit: When the user is on the home page I want to display the text-colour of the link as red (without hovering or anything) and when he decided to go to the about page to change the text-colour for the home link back to blue, but to change the one for about to red. It is meant as an indicator on which page the user currently is... Can this be done with JavaScript?Kurt

[Synook]

By the way, the href property will always return the absolute file path. The JavaScript function below should do what you want

window.onload = function() {	anchors = document.getElementsByTagName("a");	for (i = 0; i < anchors.length; i++) {		if (anchors[i].href == window.location) {			anchors[i].style.color = "#FF0000";		}	}}

[kurt.santo]

Synook,You saved my day! Works well. Cheers...Kurt

[kurt.santo]

Synook,You saved my day! Works well. Cheers...Kurt

Actually, two more questions that arose after I put the change into place:1. The site is a mulitlanguage site, so there might be a "?lang=de" or "?lang=en" attached to the file name. Obviously the links are not listed with those querystrings and therefore the script does not have a chance to work as intended when user clicks onto german or english. How could you modify the line "if (anchors.href == window.location)", so that it not only tests for window.location, but additionally for window.location plus "?lang=de"/""?lang=en"?2. When you are in the sitemap page not only the link in nav bar is highlighted, but also the link in the listing. I would like to avoid that. Is there a way to apply the styling only to links that are in the nav bar (class="nav" - use class as I have two bars).? That would be great! Kurt

[Synook]

1. The site is a mulitlanguage site, so there might be a "?lang=de" or "?lang=en" attached to the file name. Obviously the links are not listed with those querystrings and therefore the script does not have a chance to work as intended when user clicks onto german or english. How could you modify the line "if (anchors.href == window.location)", so that it not only tests for window.location, but additionally for window.location plus "?lang=de"/""?lang=en"?

You can split the location into two parts so that it ignores anything after and including the ?

window.onload = function() {	anchors = document.getElementsByTagName("a");	var url = window.location.href.split("?")[0];	for (i = 0; i < anchors.length; i++) {		if (anchors[i].href == url) {			anchors[i].style.color = "#FF0000";		}	}}

2. When you are in the sitemap page not only the link in nav bar is highlighted, but also the link in the listing. I would like to avoid that. Is there a way to apply the styling only to links that are in the nav bar (class="nav" - use class as I have two bars).? That would be great!

The easiest way would be to just give the navigation bars each an id (e.g. "nav1" and "nav2") and then loop the JavaScript for both of them.

window.onload = function() {	var navbars = new Array("nav1", "nav2"); //The ids of your navbars	for (j = 0; j < navbars.length; j++) {		anchors = document.getElementById(navbars[j]).getElementsByTagName("a");		var url = window.location.href.split("?")[0];		for (i = 0; i < anchors.length; i++) {			if (anchors[i].href == url) {				anchors[i].style.color = "#FF0000";			}		}	}}

[kurt.santo]

Synook,Great stuff! Cheers, mate! Works well...Kurt

[dexter]

I've done something similar with PHP and CSS. I rather generated the navigation to be the way I want it from the start, than to loop thru all the links in the page with JS.Snippet of code for the page the user will see (included in all public pages):

<?php  $p = $_SERVER["SCRIPT_NAME"];  $links = array  (        array("/en/index.php", "Home"),        array("", ""),        array("/en/sitemap.php", "Site Map"),        array("", ""),        array("/en/famtree/index.php", "Family Tree"),        array("/en/books/index.php", "Books")        ...  );  echo '<ul>';  foreach ($links as $tmp)  {    if ($tmp[0] == "")    {      echo '</ul>';      echo '<ul>';    }    else if ($tmp[0] == "/" . $p)      echo '<p>' . $tmp[1] . '</p>';    else      echo '<a href="' . $tmp[0] . '">' . $tmp[1] . '</a>';  }  echo '</ul>';

PS: Don't copy and paste, I've trimmed the original scripts to show only what is important, thus there may be errors.PS2: If u want to link to the current page, but mark it (what for?), u can do the following change:

<snippet>else if ($tmp[0] == "/" . $p)	  echo '<p>' . $tmp[1] . '</p>';	else	  echo '<a href="' . $tmp[0] . '">' . $tmp[1] . '</a>';</snippet>

to something like:

else if ($tmp[0] == "/" . $p)	  echo '<a href="' . $tmp[0] . '" class="marked">' . $tmp[1] . '</a>';	else	  echo '<a href="' . $tmp[0] . '">' . $tmp[1] . '</a>';

PS3: If I should not have posted this here even though it's on topic, cause it's the wrong forum, please PM me. As I guess u could c, I'm still a newbie to the forum.

[Synook]

If I should not have posted this here even though it's on topic, cause it's the wrong forum, please PM me.

Don't worry, threads always wander around the place, if a moderator feels a post is too different from the original thread he / she can always split it.