views:

25

answers:

0

I have really liked how the new Twitter and Facebook have saved page loads by instead loading the content dynamically through ajax. I want to start rolling this out to my sites, but I have no idea where to even start.

Twitter and Facebook now have uri's like this: http://twitter.com/#!/messages

$(document).ready(function () {

// Check if a hash exists already and if so load that page instead.
if(window.location.hash) {
    $("div#content").load(window.location.hash);
} else {
    // load the home page.
    $("div#content").load("http://localhost/home/");
}

// Allow menu to change url hash and load new content.
$('ul#menu li a').click(function() {
    $("div#content").load(window.location.hash);
});

});

The html for the menu I have:

<ul id="menu">
    <li>< a href="#">logout</a></li>
    <li>< a href="#!/settings">settings</a></li>
    <li>< a href="#!/messages" class="notify">messages <span>3</span></a></li>
    <li>< a href="#!/profile">profile</a></li>
    <li>< a href="#!/" class="selected">home</a></li></ul>

Any idea how Facebook or Twitter does this?