Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 990
Kusti Avatar asked Jul 12 '11 07:07

Kusti


2 Answers

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!

like image 63
tmaximini Avatar answered Nov 14 '22 05:11

tmaximini


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

like image 28
anton_byrna Avatar answered Nov 14 '22 05:11

anton_byrna