CODEWITHSUNDEEP
jquery
Robert
Robert

Reputation: 816

Using browser history with jQuery

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?

Upvotes: 5

Views: 7216

Answers (1)

jjlharrison
jjlharrison

Reputation: 674

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.

Upvotes: 2

Related Questions