How can I detect the back/forwards buttons being clicked when using History.js?

Question

Im using History.js (click) with jQuery in my code.

When loading new content via ajax i use:

History.pushState({my:stateobject},\"newtitle\",\"supern         


        

Answer 1

You wouldn't capture the back click event, as there is none.

What you want to do is make sure the history object is in the right state by using window.history.pushState, window.history.popState, window.history.replaceState methods.

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Answer 2

You need to bind an event handler to the statechange event, like this:

$(window).bind('statechange',function(){
// Do something, inspect History.getState() to decide what
})

There is a complete javascript snippet that comes with History.js, which can be used to 'ajaxify' a site completely: https://github.com/browserstate/ajaxify

Take a look there for more inspiration.

Answer 3

I was able to use the "onPopState" event to trigger my custom AJAX code.

window.onpopstate = function(event) {
  $(fellowModal).foundation('reveal', 'close');
};

I tried several other things and that is what worked for me.