Question

How can i make pages load like rapidshare without reloading window?

for example:

https://rapidshare.com/#!home

if you browse through pages, browser window is not reloading, it just change last parameter of url like #!myrs_overview, #!buyrapids, #!help etc

when i see it in firebug it is giving that parameter name, i.e from above (home,buyrapids)
http://screensnapr.com/v/wPJtCY.png

Thanks

Answer 1

#! is called a hashbang, and it’s the standard for allowing Google to crawl ajax pages. They’re simply using AJAX to repopulate the page information and then updating the hash url:

Take the following example navigation link:

<a href="contact.php" title="Contact Us" id="contact-us">Contact</a>

If we don’t want the page to redirect to contact.php but we want to load the content, we could do this instead:

<a href="#!contact" class="nav-link" rel="contact.php" title="Contact Us" id="contact-us">Contact</a>

Then with JQuery:

$('.nav-link').click(function(){
    var $this = $(this);
    $.ajax({
        url: $this.attr('rel'),
        success: function(data){
            $('body').fadeOut().html(data).fadeIn();
        }
    });
});  

If someone enters your site with the hashbang in the url, we simply detect it and load the appropriate page; something like this would work:

$(function(){
    if(window.location.hash){
        if(window.location.hash.indexOf('#!') === 0){
            $.ajax({
                url: window.location.hash.replace('#!','') + '.php',
                success: function(data){
                    $('body').fadeOut().html(data).fadeIn();
                }
            });
        }
    }
});