How does Facebook keep the header and footer fixed while loading a different page?

Question

When browsing through Facebook pages the header and fixed footer section remain visible between page loads AND the URL in the address bar changes accordingly. At least, that's the illusion I get.

How does Facebook achieve that technically speaking?

Answer 1

One way to provide headers and footers that appear invariant is via CSS - here is an example of a fixed footer (notice the "position: fixed;"):

#Footer  { 
  font-size:xx-small; 
  text-align:left; 
  width:100%; 
  bottom:0px; 
  position:fixed; 
  left:0px; 
  background-color: #CCCCCC; 
  border-top: 1px solid #999999; 
  padding:4px; 
  padding-right:20px; 
  color:#666666; 
}

You'll want to make sure that you add some Margin-Bottom to your page divs (those that fill the main portion of the page) to leave room for the fixed footer (same with a header using Margin-Top).

This does not actually stay on the page but, because the positioning is so tight and invariant, it will appear as if it does unless your page loads take too long. I don't know if this is what FaceBook does but it will give you much the same effect.

Answer 2

Well, the way to accomplish such a thing would be through AJAX, but as far as I can see, facebook in fact doesn't do this... I just checked, and it refreshes the header like most sites...

Edit: When I first answered this, I was looking at Facebook with Google Chrome (2.0), which for whatever reason, doesn't actually do it this way-->when I click on My Profile from the homepage, it gives me this in the address bar: http://www.facebook.com/profile.php?id=1304250071&ref=profile

and therefore refreshes the whole page... Strange

Answer 3

Refer to Mark Brittingham's answer for how to style it, although I don't think that is what you are asking here. I will give you the technical details on how it works (and why it is fairly brilliant).

Take a look at the status bar when you hover over the Profile link in the header...

http://www.facebook.com/profile.php?id=514287820&ref=profile

That is where that <a> tag is pointed to. Now look at the address bar when you click it...

http://www.facebook.com/home.php#/profile.php?id=514287820&amp;ref=profile

Notice the "#" fragment identifier/hash? This basically proves that you haven't left the page and the previous request was made with AJAX. They are intercepting the click events on these links, and overriding the default functionality with something of their own.

To make this happen with Javascript, all you have to do is assign a click event handler to those links like so...

var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');

for(var i = 0, l = headerLinks.length; i < l; i++) {
  headerLinks[i].onclick = function() {
    var href = this.href;

    //Load the AJAX page (this is a whole other topic)
    loadPage(href);  

    //Update the address bar to make it look like you were redirected
    location.hash = '#' + href;

    //Unfocus the link to make it look like you were redirected
    this.blur();

    //Prevent the natural HTTP redirect
    return false;
  }
}

One fabulous benefit to this approach is that it allows the back button to be functional (with a little added trickery), which has traditionally been a painful side effect of chronic AJAX usage. I'm not 100% sure of what this trickery is, but I bet it's somehow able to detect when the browser modifies the fragment identifier (possibly by checking it every ~500 milliseconds).

As a side note, changing the hash to a value that can't be found within the DOM (via element ID) will scroll the page all the way to the top. To see what I'm talking about: you scroll down about 10 pixels from the top of Facebook, exposing half of the top menu. Click on one of the items, it will jump it back up to the top of the page as soon as the fragment identifier gets updated (without any window repaint/redraw delay).

Answer 4

With CSS absolute/fixed positioning, the div tags containing the headers and footers can be anywhere in the HTML. Like at the top!

On most current browsers there is a render delay, one quarter second for Firefox I believe, so that the page will not display partially rendered content in quick flashes and waste a lot of time drawing as network data comes in.

So what can happen is that the new page quickly returns HTML containing the styles and header and footer. This content can be rendered immediately by the browser, so when it displays the next page, it appears as if those didn't change.

If the page is generating dynamic content, a good trick is to put all the static information at the top, output that and flush the data buffer. Then do the dynamic database queries and such.

Answer 5

To augment Josh Stodola's answer: In my understanding the YUI Bookmark Manager does exactly this job.