kurt.santo Posted January 28, 2008 Share Posted January 28, 2008 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 Link to comment Share on other sites More sharing options...
Synook Posted January 28, 2008 Share Posted January 28, 2008 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 } }} Link to comment Share on other sites More sharing options...
Ingolme Posted January 28, 2008 Share Posted January 28, 2008 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 likewindow.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. } }} Link to comment Share on other sites More sharing options...
kurt.santo Posted January 28, 2008 Author Share Posted January 28, 2008 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 Link to comment Share on other sites More sharing options...
Synook Posted January 29, 2008 Share Posted January 29, 2008 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"; } }} Link to comment Share on other sites More sharing options...
kurt.santo Posted January 29, 2008 Author Share Posted January 29, 2008 Synook,You saved my day! Works well. Cheers...Kurt Link to comment Share on other sites More sharing options...
kurt.santo Posted January 30, 2008 Author Share Posted January 30, 2008 Synook,You saved my day! Works well. Cheers...KurtActually, 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 Link to comment Share on other sites More sharing options...
Synook Posted January 31, 2008 Share Posted January 31, 2008 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"; } } }} Link to comment Share on other sites More sharing options...
kurt.santo Posted January 31, 2008 Author Share Posted January 31, 2008 Synook,Great stuff! Cheers, mate! Works well...Kurt Link to comment Share on other sites More sharing options...
dexter Posted February 2, 2008 Share Posted February 2, 2008 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. Link to comment Share on other sites More sharing options...
Synook Posted February 3, 2008 Share Posted February 3, 2008 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.