StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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).</p> <p>Take a look at the status bar when you hover over the Profile link in the header...</p> <blockquote> <p><a href="http://www.facebook.com/profile.php?id=514287820&ref=profile" rel="noreferrer">http://www.facebook.com/profile.php?id=514287820&ref=profile</a></p> </blockquote> <p>That is where that <a> tag is pointed to. Now look at the address bar when you click it...</p> <blockquote> <p><a href="http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile" rel="noreferrer">http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile</a></p> </blockquote> <p>Notice the "#" <a href="http://en.wikipedia.org/wiki/Number_sign#Other_uses" rel="noreferrer">fragment identifier/hash</a>? 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.</p> <p>To make this happen with Javascript, all you have to do is assign a click event handler to those links like so...</p> <pre><code>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; } } </code></pre> <p>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).</p> <p>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 <em>any</em> window repaint/redraw delay).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload