1

I've gotten this far on setting up popstate() - a totally new thing for me. I have loaded content for each click of the navigation, and pushstate() changes the url.

But it doesn't load anything when the back button is pressed. Only when I've pressed the back button enough, that the url shows the index page again, then it reloads the page.

Here's what I have so far:

$("#top_nav li a, #footer_info").on("click", function(e){

                // prevent the a href from doing what it naturally does.
                e.preventDefault();

                // highlight active nav link & turn off others              
                $('.current').attr('class','link1');


                href = $(this).attr("href");

                // page chosen...
                var loadpage = 'inc/'+$(this).attr('name')+'.php';
                var footer = 'inc/footer.php';

                // fade out the main box                
                if(loadpage == "inc/index.php"){

                    $('#main_center_box,.header_content').css({opacity:1}).stop().animate({ opacity: 0 }, 700, function() { /* animation complete */ });
                    $('#starting_point, .places-slideshow,#full-size-background').css({display:"block"}).stop().animate({ opacity: 1 }, 1400, function() { /* animation complete */ });
                    $('#main_center_box').css({zIndex:"-1"});
                    $("#starting_point_link").attr('class','');

                } else {
                    $('#main_center_box,#footer_links').stop().animate({ opacity: 0, zIndex:0 }, 700, function() { 
                        $(this).attr('class','current');

                        // now load the page that matches navigation selected, and fade back in.
                        $('#main_center_box').css({zIndex:1 }).load(loadpage).stop().animate({ opacity: 1}, 700, function() { /* animation complete */ });

                        window.history.pushState('', 'New URL: '+href, href);

                    });
                }
    });




    // researching deeplinking solutions

    function change(state) {
    if(state === null) {
        $("#main_center_box").load('inc/mazenga.php');
    } else {

        $("#main_center_box").load(state.url);
    }
}

$(window).bind("popstate", function(e) {
    change(e.originalEvent.state);
});



(function(original) {
    history.pushState = function(state) {
        change(state);
        return original.apply(this, arguments);
    };
})(history.pushState);
2
Contributors
1
Reply
15
Views
4 Years
Discussion Span
Last Post by LastMitch
0

But it doesn't load anything when the back button is pressed. Only when I've pressed the back button enough, that the url shows the index page again, then it reloads the page.

There's a small code snippet from this link you can add it to your code which handle browser back and forward button clicks:

http://css-tricks.com/rethinking-dynamic-page-replacing-content/

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.