How do I do awesome refreshless page changes like GitHub do?
GitHub seems to be doing something incredible: animated page changes without breaking state. The address bar changes, but the page doesn’t refresh and I get animated to the next view.
For example, hit this URL: as3logback/ then hit this URL: as3logback/lib
How in the devil are they doing it!?! It’s so cool! Are they using some sort of frame or something serverside?
4 Solutions collect form web for “How do I do awesome refreshless page changes like GitHub do?”
They have a detailed blog entry up on how it works (HTML5 History API) here: https://github.com/blog/760-the-tree-slider
http://www.asual.com/jquery/address/ is a jquery plugin which supports HTML 5 History API in addition to the traditional hash tag method. This is useful for supporting the transitions in older browsers (via hash tag) while using the HTML 5 method when available.
They most likely use Ajax and HTML5
Note that this only works in the most recent browsers like Firefox 4 and Chrome 8 (IE 9 ?). So you would still need a fallback solution like using the fragment identifier as a lot of Ajax driven websites do now (a good example to see the difference is Facebook).
Pjax: Demo, Source (GitHub)
It is the one that GitHub uses… reference