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);