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

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&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 2

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.