Question

Right now I have a system setup so that there are certain steps a person has to take to progress on a page. Im simply using show hide and to progress im using:

    function shownext(){
            $(this).next('div').fadeIn(500);
    }

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

Is there a way I can get deep linking so that the person can go back to a previous step using the browser back button?

Answer 1

The history.js library makes it pretty easy to do this sort of thing using the HTML5 history API (with hash fallback for browsers lacking the API).

You could 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.