Html5 histoty API and CSS3 transitions

Check out new HTML5 History 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
})
view rawslide.jsThis Gist brought to you by GitHub.
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)
})
view rawunslide.jsThis Gist brought to you by GitHub.

 

 

Here is the best book for me to read about HTML 5 http://diveintohtml5.org/