Javascript hashtag navigation

Question

Currently, I'm using following function which works with click event.

$('a.ux-thumb-wrap').click(function(e){
    e.preventDefault();
    href=$(this).attr('href');
    if($(player_container).is(":visible")){
        $(player).tubeplayer('play', href)

    }

    else {
        $(player).tubeplayer({
            width: 853,
            height: 480, 
            allowFullScreen: "true",
            preferredQuality: "large",
            loadSWFObject: false,
            modestbranding: false,
            initialVideo: href,
            autoPlay: true
        });
        player_container.slideDown("slow");
    }

I want to get this result

• If visitor entered direct url address of some movie (which looks like: domain.com/?page=youtube#5hly8) into the address bar then fetch the value standing after # symbol and assign to href, do the rest of function

• During playback, If user clicks on another thumbnail, change the value after # symbol on adress bar to thumbnails href tag, and do the rest of function

I didn't work with hashtags before. Please Help me to modify this function.

Answer 1

Use the jquery hashchange plugin for a lightweigth approach: http://benalman.com/projects/jquery-hashchange-plugin/

Even better in the long run is the backbone.js router: http://documentcloud.github.com/backbone/#Router