How do I achieve the "GitHub browse repo effect" (update URL without refreshing the page)

Question

When I browse a repo in GitHub (example: https://github.com/sizzlelab/kassi) and click a folder, it loads the folder with a cool javascript animation, moving stuff to the left, instead of reloading the whole page. However, the URL of the page is still updated on every click.

How do I achieve this? To my knowledge, you cannot update the page URL from javascript, so you need to refresh the page. My guess is that they do a partial caching of the page so that it does not seem to reload and then run the javascript animation after reload. Am I on the right track? Any pointers on how this can be achieved? My environment is jQuery and rails, but a general advice will help also.

Answer 1

what you want is watch this screencast: http://railscasts.com/episodes/246-ajax-history-state

in combination with jQuery UI effect "slide" - http://docs.jquery.com/UI/Effects/Slide

good luck!

Answer 2

You can read about this behaviour in spec — History API and on MDN in section "Adding and modifying history entries".