jquery to navigate through content and browser's back button

Question

I am very new to jquery – currently using it to show and hide content (divs) on a webpage when according buttons are clicked in a navigation-menu. I am roughly doing so as following:

$(document).ready(function(){

   // show the "about" page
    $("#aboutButton").click(function(){
        $("#aboutPage").addClass("visible")
        $("#contactPage").removeClass("visible")
    });

   // show the "contact" page
    $("#contactButton").click(function(){
        $("#aboutPage").removeClass("visible")
        $("#contactPage").addClass("visible")
    });
});

although I'd be eager to know how to approach this more clever, my most urgent problem is the brower's back-button that obviously doesn't play well with this. ideally I'd want it to work as expected: if it's pressed, I'd like to go back to the last visible section / div of my page. I am how ever suspecting that my approach is generally very wrong...

would be gracious for any hint! thanks

Paolo · Answer 1 · 2018-03-01T22:39:11.577

You can "manipulate" browser's history with history.pushState.

The browser displayed url will change but the new url won't be loaded.

Then you can detect back/forward button assigning an event handler (function) to window.onpopstate

This is just an example:

$(document).ready(function(){

   // show the "about" page
    $("#aboutButton").click(function(){
        $("#aboutPage").addClass("visible")
        $("#contactPage").removeClass("visible")

        history.pushState( {page: "about"}, "", "about");
    });

   // show the "contact" page
    $("#contactButton").click(function(){
        $("#aboutPage").removeClass("visible")
        $("#contactPage").addClass("visible")

        history.pushState( {page: "contact"}, "", "contact");
    });

    // detect browser's back/forward buttons

    window.onpopstate = function( e ) {
        if( e.state.page === 'about' ) {
            $("#aboutPage").addClass("visible")
            $("#contactPage").removeClass("visible")
        }

        if( e.state.page === 'contact' ) {
            $("#aboutPage").removeClass("visible")
            $("#contactPage").addClass("visible")
        }       
    };
});

pushState receives as last parameter the URL the visitor virtually navigates to. The second parameter is (at the time of writing) unused.

The first parameter is an object you build upon your needs that lets you store information in the browser history.

When onpopstate is triggered (the user navigated back or forward) and the event e is passed to the callback you can retrieve the store object from e.state.

Above is the easy part: now comes the more annoying.

As you're manipulating the url programmatically the user may bookmark any of those URLs or reload the page and the website should respond accordingly.

The website should actually load the page (and not raise a 404) and -depending on the URL- either show #aboutPage or #contactPage.

For reference: Manipulating the browser history

jquery to navigate through content and browser's back button

1 Answers1