In order to make the jQuery history plug-in work, one needs to format one’s links like so:
<pre><a href="#1" rel="history">load 1</a></pre>
In the $(document).ready event, the last line we add to the onClick event of each of our links we're adding to the history cache, we use 'return false;' which I thought would counteract any effect of auto-scrolling that would occur due to using the pound (#) mark in the href of the link. It turns out this was incorrect. (at least in the context of IE and Firefox) Consider the following piece of code from a "menu" that I created for a page I developed recently:
<ul id="mainMenu" class="menu"> <li id="menuItem1" class="current"><a href="#menuItem1" rel="history"> Menu Item 1</a> <li id="menuItem2"><a href="#menuItem2" rel="history"> Menu Item 2</a> <li id="menuItem3"><a href="#menuItem3" rel="history"> Menu Item 3</a> </li> </ul>
The issue seems to be that since I set the ID value to the exact same value as the hash value (e.g. id=”menuItem1” and href=”#menuItem1”) that the browser detected the <li> tag menuItem1 in this case as the position in the page that I wanted to scroll to when this link was clicked.
To work around this behavior, I merely changed the names of the ID attributes I assigned to each <li> tag, like so:
<ul id="mainMenu" class="menu"> <li id="limenuItem1" class="current"><a rel="history" href="#menuItem1" > Menu Item 1</a></li> <li id="limenuItem2"><a rel="history" href="#menuItem2" > Menu Item 2</a></li> <li id="limenuItem3"><a rel="history" href="#menuItem3" > Menu Item 3</a></li> </ul>
ColorActiveMenu("li" + hash);
Hope this helps.