I have what is probably a very stupid question. I have been writing a Ruby On Rails app for the last few weeks, using the excellent Bootstrap/Twitter ponents to avoid me having to do anything artistic.

I noticed on that site, the navigation bar does not appear to ever reload.

.html

Clicking on the links at the very top (Overview, Scaffolding, etc) causes the page to change, and the URL to change, but the topbar itself does not appear to reload.

I can't detect anything AJAX-y going on that would do this (using Chrome's dev toolbar etc). I can only imagine that it's:

• An optical illusion, and it is reloading just it's so fast I can't see it. But then why does it not appear to reload at the same time as the content?

• Some undetectable AJAX going on

• Some sort of browser caching going on (can you do that for a rendered page element)
• Something pletely different

Any thoughts most wele :)

I have what is probably a very stupid question. I have been writing a Ruby On Rails app for the last few weeks, using the excellent Bootstrap/Twitter ponents to avoid me having to do anything artistic.

I noticed on that site, the navigation bar does not appear to ever reload.

http://twitter.github./bootstrap/javascript.html

Clicking on the links at the very top (Overview, Scaffolding, etc) causes the page to change, and the URL to change, but the topbar itself does not appear to reload.

I can't detect anything AJAX-y going on that would do this (using Chrome's dev toolbar etc). I can only imagine that it's:

• An optical illusion, and it is reloading just it's so fast I can't see it. But then why does it not appear to reload at the same time as the content?

• Some undetectable AJAX going on

• Some sort of browser caching going on (can you do that for a rendered page element)
• Something pletely different

Any thoughts most wele :)

• javascript
• html
• ajax

• 1 It never changes so it's as you say, an optical illusion. – j08691 Commented Feb 29, 2012 at 16:20

2 Answers 2

The boostrap site's navbar does seem to be static during reloads but it isn't some clever js that is doing that. There is no hidden content that is being displayed.

What's happening here is a very fast page load. The guys at boostrap moved all their js links and scripts to the bottom of their html so their pages load faster, they even say that in their html. The pages load so much faster that certain elements like the navbar don't seem to change at all. I tried it on my on site and low and behold the static navbar illusion.

So maybe moving your js and scripts to the bottom of your html can help you achieve the same trick.

The entire page (each tab) is loaded, and hidden when the page loads.

The URL is changed using location.hash when the links are clicked (and JavaScript is blocking navigation).

When the hash is changed, the onhashchange event is ran, and the correct div is shown.

Here is an example: http://jsfiddle/uFgtS/ (Well, I guess you can't see the url change. Copy the HTML, CSS and JS into a file and run it.)