Simon Griffee · Time, light, movement & distance.

Github Tree Slider, History.js ➶

13 May 2011

bq.. The new HTML5 History API (which really has nothing to do with HTML — it’s a JavaScript API) allows us to manage the URL changes while CSS3 transitions handle the sliding. Permalinks are always maintained, your back button works as expected, and it’s much faster than waiting for a full page load.

Basically we intercept your click, call @pushState()@ to change the browser’s URL, load in data with Ajax, then slide over to it.


$('#slider a').click(function() {
  history.pushState({ path: this.path }, '', this.href)
  $.get(this.href, function(data) {
    $('#slider').slideTo(data)      
  })
  return false  
})

When you hit the back button, an @onpopstate@ handler is fired after the URL changes, making it easy to send you “back”.


$(window).bind('popstate', function() {
  $('#slider').slideTo(location.pathname)
})

p. Awesome. And now there’s “History.js”:https://github.com/balupton/History.js:

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.

Send