Navscript

Download the most recent version from the scripts page.

Script to set current page to a different style in site navigation. Allows the same navigation html to be used on every page. The script is placed at the end of the html, before the close </body> tag, and looks for links to the current page in all items with the appropriate class.

To set up script:

  1. Give all navigation containers an id. There can be one or more different navs on the site.:
    <ul id="nav">
  2. Edit the file navscript.js to add all the id's for the navigation containers on the site. The following example lists three nav id's, but there can be any number, including one:
    // the id's of the elements containing the menu
    mainDiv = new Array("nav","coolnav","funkynav");
  3. Link the file navscript.js before the close </body> tag on the html page:
    <script type="text/JavaScript" src="navscript.js"></script>
    </body>
  4. Create a style for the class currpg. This class will be applied to a <span> element that will replace the link for the current page only:
    /* this style will be applied to menu items that link to the current page */
    .currpg {color: #FF9900;
    	background-color: #eee;
    }
  5. Every page can have the same nav, and the script will look for the current page and change the link for that page. For example, the generated html for this example page nav above is:
    <ul id="nav">
    ...
    	<li><span class="currpg">navscript</span> </li>
    ...
    </ul>
  6. There is also an alternate script navscript_class.js. This script uses a class assigned to every navigation container instead of an id in step 1. The same class, or different classes can be used.

Known Issues

safari mac - unescaped file name paths
Because safari on mac does not seem to escape urls in location.href, but does in .href property of links in the html, some file paths do not match and the script will leave the current page url unchanged. It currently catches spaces, but other weird mac characters in filenames have not been added - change the regular expression on line 27 if this is an issue.
IE/mac
Some pages do not apply the style sheet to all elements on a page after this script has removed the link. It only happens if page has not finished the layout when the script runs (eg, if an alert is put into the script and you wait until the page builds, then there is no problem.) Possibly could solve the problem by putting the script into onload event. I'm not that concerned about this, though, because IE/mac is basically a dead browser. Only time i've seen the problem is when the link is right before a nested list:
<LI><A href=about.html>ABOUT US</A>
	<UL id=aboutnav>
		<LI><A href=pack.html>THE NO BS MESSENGER PACK</A></LI>
	...
	</UL>
</LI>
		
Sites that do not use index.html as default page
If your site uses a different default page, edit defaultUrl in the file navscript.js to change the name of the default page. Otherwise the script will miss pages that can be called by just referring to the directory root (such as http://eightize.com), as the nav may refer to the actual file (ie http://eightize.com/index.php).

Copyleft