0

Trying really hard to understand jQuery BBQ and not doing so well. There are a few things I need to figure out, but I'll try to focus this on what I believe is the most important in hopes that knocking that part out will guide me to solving the others.

I've got a page with three sections that are each hidden. When a user clicks a nav link, the corresponding section expands and others (if active) are hidden. The URL is updated with a hash representing the page. So localhost becomes localhost/#work. In my code, this works correctly.

Within the #work section, there are multiple thumbnails that correspond to different videos and I'm trying to add values into the URL to allow bookmarking and other love, hence using jQuery BBQ. This sort of works, there's a minor issue of the url becoming ugly. localhost becomes localhost/#work=&misery=. Ugly, but it is updated correctly (and the section stays open as intended).

Here's the goods:

When a hashchange event occurs, my super duper hash-bash function runs and checks the URL for the hash value, then opens the appropriate section. How, using jQuery BBQ's .getState() method, can I pull the videos value from the URL and then click on that thumbnail?

Thanks so much, I know that was long winded but I want to be as clear and descriptive as possible. Please find a jsFiddle below (though I can't get the hashes to show up at all in that environment... ugh!) as well as the raw code.

http://jsfiddle.net/danielredwood/n2KWv/2/

JavaScript:

function navi(){
var hash = window.location.hash,
    hspl = hash.split('=')[0],
    acti = $('.out')
    test = $.bbq.getState();

    console.log(test);

    if (!$('body').hasClass('work')){
        acti.removeClass('out').slideUp(400);

        $(hash).addClass('out').slideDown(400);        
    } else {
        if (hspl != '#work') {
            $('body').removeClass('work');

            acti.removeClass('out').slideUp(400);

            $(hash).addClass('out').slideDown(400);
        }
    }
}

/* Nav */

$(window).bind('hashchange', function(){
    navi();
});

/* Thumbnail Clicks */

$('.thumbnail a').click(function(){
    $('body').addClass('work');

    var name = $(this).attr('id');

    $.bbq.pushState(name);                

    return false;
});

​

technopeasant
  • 7,309
  • 26
  • 86
  • 146

1 Answers1

0

Instead of putting the "show_video" event as onClicks for each link, you could have a separate show_video function which takes the id to be shown. You can then use jsbbq to add multiple hash state properties and then test for their existence and act accordingly.

So you could do something like:

function show_video(vid_id) {
    ...
}

$('.thumbnail a').click(function(){
    ...
    var name = $(this).attr('id');

    $.bbq.pushState({'view':'work', 'video':name});                
    ...

    return false;
});

$(window).bind('hashchange', function(){
    var state = $.bbq.getState();
    if (state['view'] === 'work'){
        var vid_id = state['video'];
        show_video(vid_id);
    } else {
       ...
    }
}

You may also want to read up on the *merge_mode* property of the $.bbq.push_state(..) function. It allows you to either only overwrite specific hash state values or rewrite the entire hash state.

http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.bbq.pushState

puzzfuzz
  • 106
  • 7