Javascript menu that remembers position
I am currently working on a JS menu for a web application. It consists of two bars, a fixed main and a submenu that is activated (display: block from display: no) using a Javascript function. The selected parameters of the main menu, as well as the submenus, are also highlighted by adding class = "main_on" and class = "sub_on" on the onclick event. Is there a way to remember which submenu was displayed and which options are currently classified as active when the user hits F5 or reloads the page? I'm looking, if possible, for a cookie and non-database-free approach.
Thank,
Mike
source to share
You can make the link / element clicked (for onclick event), set the url hash in the address bar. (i.e. http://server.name/page#URLhash ) If it's a link you just need to set up the HREF property, otherwise you might have to manipulate with window.location.
This sets the current state. When the page (re) loads, check the url hash value. See http://developer.mozilla.org/en/DOM/window.location for details on how to access it . If the hash of the URL is still in the address bar, you should be able to get the value.
Then use the value to determine which menu to activate. So you can restore the state this way.
There are some differences between browsers. Do a search in "Ajax History" that some people have used a URL hash to save state after Ajax actions. Not the same problem you are trying to solve, but similar. Check out RSH: http://code.google.com/p/reallysimplehistory/
The same ideas will be used.
source to share