Hi, 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:
Code:
$('#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:
Code:
$(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");
      }
	});
	
  });

});