up vote 1 down vote favorite
share [g+] share [fb]

I have been trying to get the forward an back browser buttons to work on a small site using pjax and have come up with the following code to handle class changes and fading in and out the various overlays.

However I have found that Chrome and Safari treats the initial page load as a popstate and so it is causing me grief. Is there anyway to stop this?

$(window).on("popstate", function() {

if ($('body').hasClass('info')) {
       $('body').removeClass("info").addClass("work");
       $('.info_overlay').fadeOut(duration);
        alert('popstate');
}

else if ($('body').hasClass('work')) {
          $('body').removeClass("work").addClass("info");
          $('.info_overlay').fadeIn(duration);

 }

else {
    $('body').removeClass("project").addClass("work");
    $('.project_overlay').fadeOut(duration);
}
});
link|improve this question
feedback

1 Answer

up vote 0 down vote

Tag the state when you call pushState(), then ignore all popstate events that don't have your tag. e.g.

history.pushState({ myTag: true }, ...)

$(window).on("popstate", function(e) {
  if (!e.originalEvent.state.myTag) return; // not my problem
  // rest of your popstate handler goes here
}

Don't forget to call replaceState at page load so that you can handle the popstate when you get back to the initial page load. 

$(function() { history.replaceState({ myTag: true }); });
link|improve this answer
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.