Using browser history with jQuery

Question

Now I have a system setup, so there are certain steps that a person must take to advance on the page. I just use show hide and progress using:

function shownext(){ $(this).next('div').fadeIn(500); } function showprev(){ $(this).prev('div').fadeIn(500, backup); } 

Is there a way to get a deep link so that a person can return to the previous step using the back button?

Answer 1

The history.js library makes it quite easy to do such things using the HTML5 history API (with a hash reserve for browsers that do not have an API).

You can do something like:

 function shownext(){ $(this).next('div').fadeIn(500); // Push state with next page number. } function showprev(){ $(this).prev('div').fadeIn(500, backup); // Push state with previous page number. } History.Adapter.bind(window,'statechange',function(){ var State = History.getState(); goToPage(State.data.page); } function goToPage(page) { // Go to page. } 

The documentation and demos for the library are very useful.