Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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);
  }
});
share|improve this question
add comment

3 Answers

up vote 7 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 }); });
share|improve this answer
 
I actually found that the solution is within pjax. So instead of doing –  Sam Quayle May 26 '12 at 20:23
 
That's the only solution i found that works after the first call of a page, after a reload and in gecko/webkit/trident. Plus without changing the behavior browsers calling popstate! Great solution. Thanks! –  griffla May 16 '13 at 18:31
add comment
up vote 4 down vote accepted

I actually found the solution within pjax itself.

Instead of doing: 

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

which fired the popstate on the initial page load I did:

$(window).on('pjax:popstate, function() {...
share|improve this answer
add comment
up vote 0 down vote

The best long term fix is to up-vote https://code.google.com/p/chromium/issues/detail?id=63040 to get Google to fix this. They've known they're out of compliance with the HTML5 spec for about two years now.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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