Using History.js - I'm confused

Question

I'm implementing ajax navigation and I'd like to utilize the html5 history API, so I stumled upon History.js.

I'm not exactly sure how to go about using it and the documentation for it is not very good, nore are the examples.

I tried to mess with it...

$("a[href]:not(.no-ajax-navigate)").click(function(e){
    e.preventDefault();
    var path = $(this).attr('data-path');//this is "path/to/page" (clean url's)
    //so I got the path.. now what? pushState?
});

I'm clueless as to what to do now.. thanks in advance!

update 1

I looked at the [source code that]@OneTrickPony commented](http://html5.gingerhost.com/new-york) that @OneTrickPony commented and I got it working. But it seems fire fire a popstate event on page load. Is this supposed to happen? My page basically fade in/out which is kinda annoying when you initially load (refresh) the browser.

Answer 1

It's important to note you can use HTML5 history without using History.js (see this ).

History.js does give you some nice features like being able to store additional data in the history call stack. The following will set your URL path without a refresh.

$("a[href]:not(.no-ajax-navigate)").click(function(e){
  e.preventDefault();
  var path = $(this).attr('data-path');//this is "path/to/page" (clean url's)

  // Set the URL using History.js (note the capital H)
  var History = window.History;
  History.pushState(null, null, path);
});

You can use the first two arguments in pushState to store additional data (see here for more details).

To go back use: History.back();

To catch the URL change event you can use:

History.Adapter.bind(window,'statechange',function(){
  var History = window.History;
  var State = History.getState();
  // Do something here with State
});