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.

I don't know how one uses History.js while managing to not be confused :-) — Pointy
– Pointy, Commented Jan 21, 2013 at 4:55
@OneTrickPony that's a good site, but the History.js library abstracts the native APIs (to smooth over various weirdnesses), and adds some complications. — Pointy
– Pointy, Commented Jan 21, 2013 at 4:57
@OneTrickPony nice, I'm reading through the source code now :P — Petter Thowsen
– Petter Thowsen, Commented Jan 21, 2013 at 5:03
I got it working but I have an other problem. I edited my post to reflect the new problem :P — Petter Thowsen
– Petter Thowsen, Commented Jan 21, 2013 at 5:13

filitchp · Accepted Answer · 2013-01-21 06:14:54Z

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 });

Collectives™ on Stack Overflow

Using History.js - I'm confused

update 1

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

update 1

1 Answer 1

Comments

Related