github like navigation

Question

Possible Duplicate:
How does github change URL without reloading a page?

I don't know how to describe but how does this cool slide effect on github file explorer work?
Not the graphical part but the javascript/ajax logic behind. It seems like the page isn't reloading and the next directory just slides in. I thought that with javascript you only can change the hash, not the whole path of the url.
So, how is it possible to change the url from somedomain.com/foo to somedomain.com/foo/bar without reloading the whole page, just loading the new content via ajax or websockets. I definitly don't know how to do this, or with which trick this works on github.

github is using HTML5 states in supported browsers. Try an older IE version; you'll lose the slide effect. — kitti, Feb 08 '12 at 20:05
Hmm, sorry about the close vote; I have realized that the page I linked answers only the second part of the question, not the "slide" effect. — Tamás, Feb 08 '12 at 20:06
@Tamás: This question explicitly says "Not the graphical part". — Tikhon Jelvis, Feb 08 '12 at 20:08
@TikhonJelvis: oh, OK. Sorry. Definitely need some sleep. :-/ — Tamás, Feb 08 '12 at 20:09
You know, you can always get the full [source code](https://github.com/github/help.github.com#readme) for Github :) — Marvin Pinto, Feb 08 '12 at 21:58

score 3 · Accepted Answer · answered Feb 08 '12 at 22:56

You can use javascript libraries for this kind of thing. A good one is History.js. It uses push state when it can and falls back to hash bang urls when not. I've used it in a couple of projects and find it really good especially if you use js templates as well. Such as Dust.js

Here is a link to the Historyjs github page history js.

As far as the ajax goes. I used a type identifier on my url. So when a user navigates to /home, there is no page reload and instead an ajax call is dispatched to /homepage.json From which a json response is retrieved and then rendered into the dom or the js template.

github like navigation

1 Answers1