Navigation history at the single html page. Part 2

At the previous post we discovered anchor cheat.

How can we work with it?

My favorite javascript framework is JQuery.

JQuery hides browser-specific behavior, allows to run complex queries to the DOM, has many plugins.

It is right to include script from well-known CDN, for example Microsoft CDN

We will need BBQ jquery plugin. It provides interface to work with anchors (pushState, getState, removeState).

Main idea is that URL must define visual state of the page.

All toggle events must alter BBQ state and do not touch DOM. BBQ state will be changed from this events, or from history or just user input and will define corresponding visual state.

If we want to achieve such behavior we must bind on window object at the document ready event for "hashchange" event.

We can read written anchor with function getState and restore visual DOM state.

Do not forget to invoke $(window).trigger('hashchange'); at the document ready event, to setup initial view.

Example provided.

Navigation history at the single html page

Yann asked me about navigation history at the html page with active structures, which can collapse and expand. So I tried to write several posts about this issue.

Any modern browser has navigation history. And it is cool to be able to navigate through history at the script-driven html page. For instance accordion control without history is abnormal today.

How could we get required functionality and in the same time not change site page?

The answer is anchor! This is a small part of URL, after all host/site/folder/params information. It looks like symbol "#" and next any valid html encoded string after it: www.trololo.su/home#foo=1

If we change address to www.trololo.su/home#foo=2, browser will stay on the page. Window object will raise event "hashchange" and we can hold anchor change.

Profit!