popState and animations - pjax

Question

i have a div that slides out of the screen, loads the new content and slides back. I use jquery pjax and that part works great:

$('#menu a').on('click', function(event){

  event.preventDefault();

  var target = $(this).attr('href');

  $('li.current').removeClass("current");
  $(this).parent().addClass("current");

  $(content).transition({left:$(document).width()}, 900, 'out', function() {

    $.pjax({
      url: target,
      container: '#content',
      fragment: '#content',
      success: function(){
        $(content).transition({ left:'0px'}, 900, 'out');

        var contentHeight = $('#content').outerHeight(true)+258+$("#footer").outerHeight(true);

        if(contentHeight<parseInt($("body").css("min-height"))){
          contentHeight = "100%";
        }

        $(page).stop(true).animate({height:contentHeight}, 1000, "easeOutCubic");
      }
    });

  });

});

But i don't get it do work if the browsers back/forward buttons are used. I tried different things. Here i found a nice article but i don't get it: http://artfindertech.wordpress.com/tag/historyapi/

The thing is that the content of the div changes in the moment you click the browser back button. Then it slides out but not back. Also the url changes to the previous page for a second but the jumps to the main url of the site. Here is my trial for popState:

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

  $(content).transition({left:$(document).width()}, 900, 'out', function() {

    $.pjax({
      container: '#content',
      fragment: '#content',
      success: function(){
        $(content).transition({ left:'0px'}, 900, 'out');

        var contentHeight = $('#content').outerHeight(true)+258+$("#footer").outerHeight(true);

        if(contentHeight<parseInt($("body").css("min-height"))){
          contentHeight = "100%";
        }

        $(page).stop(true).animate({height:contentHeight}, 2000, "easeOutCubic");
      }
    });

  });

});

Answer 1

I'm trying to do the same thing right now i.e. to get animation functionality onpopstate. The way I see it right now is to:

1. on menu click call a function which will animate content and fill with the new content the container -

   function animation(PageTitle,PageLink,check) {
       //check if it is a call from menu and if it is than
       //on animation and ajax complete call
       if (check) {
           setHistory(PageTitle,PageLink); // separate function to call it indimpendently
       }
   }
   

2. as set above, after animation finished call a function regarding window.history.pushState if is a call from menu links -

   function setHistory(PageTitle,PageLink) {
       window.history.pushState({'ptitle':PageTitle,'plink':PageLink}, PageTitle, PageLink);
   }
   

3. after that set an onpopstatee function to call the function to the reverse animation and ajax -

   window.onpopstate = function(event) {
       animation(event.state.ptitle,event.state.plink,false);
   }
   

I have not test it yet but I'm implementing it right now. If it will work I will update this...

UPDATE:

Just to update this and to tell that it works like a charm, as I presumed. An one more thing, for whom it may concern... I figured out that you must call a history.replacestate on original page load in order to have the possibility to go back to the original page with the relative variables and animation.