Change the url and keep a div

Question

I saw something really different, and I have no idea how to do it.

The site Rdio.com when you click in any link, the url change totally (not #). But the div in the bottom of the page (that is playing the song) do not reload.

How they do this?

Answer 1

you can do this with an ajax load and then you mainipulate the browser history. like so:

/*clickhandler Hauptmenü*/
$('#main-nav a').on('click', function(e){
    var href = $(this).attr('href'),
        title = $(this).text();
    loadContent(href,title);
    /*manipulate Browser history */
    history.pushState({path: href, titel: title}, $(this).attr('href'), 'http://www.example.com/'+$(this).attr('href'));
    e.preventDefault();
});

window.addEventListener('popstate', function(e){
    loadContent(e.state.path, e.state.titel);
}, false);

function loadContent(href,title){
    var href = href,
        container = $('#main-cont');
        container.fadeOut(100, function(){
            container.load( href +' #main-cont', function(){
                container.fadeIn(200);
                $('title').replaceWith('<title>' + title + '</title>');
            });         
        });
};

I hope this answers your question.

Answer 2

This is done with JavaScript's new history object, using the pushState and popState methods. See also http://diveintohtml5.info/history.html

Answer 3

Correct me if I'm wrong - considering that I havent been to their site - but I believe that they would be using an Iframe of some sorts - considering that they would have to reload that div if they did otherwise