1

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 components 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.com/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 completely different

Any thoughts most welcome :)

Joe Woodhouse
  • 337
  • 3
  • 10

2 Answers2

3

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.

mand
  • 395
  • 2
  • 13
2

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.net/uFgtS/ (Well, I guess you can't see the url change. Copy the HTML, CSS and JS into a file and run it.)

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
  • Hmm, I'm not entirely sure that's true. To say again, I'm talking about the very top bar (I understand there are tabs also on that page, and I know how they work). So for example the contents of the "Using Less" page is not loaded when I am on the "Base CSS" page, and yet when I click on the links, the top bar does not reload – Joe Woodhouse Feb 29 '12 at 19:17
  • @JoeWoodhouse: Looking at Firebug, those are just links, navigating to a new page. The images/CSS are cached, so they appear to load immediately. – gen_Eric Feb 29 '12 at 19:21