Integrating Isotope with BBQ hash history

Question

I know it's a popular question but I'm struggling a little with the tutorial on the Isotope site to develop my current Isotope to use BBQ hash history.

I am essentially trying to add BBQ hash history to my current set up so I can link directly to the filtered content.

This is my jQuery code so far, which works perfectly.

jQuery(function () {
    var $container = jQuery('.wwd-content-container');
    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.each-wwd-content',
            filter: '.corporate'
        });
    });
    jQuery('.wwd-filters a').click(function () {
        jQuery('a.active-filter').removeClass('active-filter');
        jQuery(this).addClass('active-filter');
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector
        });
        return false;
    });
});

And I have changed my filter navigation from:

<li><a href="#" data-filter=".<?php echo esc_attr( $page_class ) ?>"><?php the_title(); ?></a></li>

to

<li><a href="#filter=.<?php echo esc_attr( $page_class ) ?>"><?php the_title(); ?></a></li>

I am using Wordpress hence the $page_class variables etc — but don't spend too much time on that.

Thanks and any help would be most appreciated. R

UPDATE

This is what I have so far...

jQuery(function () {
    var $container = jQuery('.wwd-content-container');
    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.each-wwd-content',
            filter: '.corporate'
        });
    });
    jQuery('.wwd-filters a').click(function () {
        jQuery('a.active-filter').removeClass('active-filter');
        jQuery(this).addClass('active-filter');
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector
        });
        return false;
    });
    jQuery('.wwd-filters a').click(function(){
          // get href attr, remove leading #
      var href = jQuery(this).attr('href').replace( /^#/, '' ),
          // convert href into object
          // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
          option = $.deparam( href, true );
      // set hash, triggers hashchange on window
      $.bbq.pushState( option );
      return false;
    });
    jQuery(window).bind( 'hashchange', function( event ){
      // get options object from hash
      var hashOptions = $.deparam.fragment();
      // apply options from hash
      $container.isotope( hashOptions );
    })
      // trigger hashchange to capture any hash data on init
      .trigger('hashchange');
});

Answer 1

It looks like you've gotten rid of the value for your variable selector, since your a tag no longer has an attribute of data-filter. If you set a breakpoint to get the value of selector, you'll see it returns undefined instead of something like .corporate or any of your other values. This means Isotope doesn't filter anything anymore.

Have a good look over the documentation for this, linked below. http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html

Your click event function should look more or less like the documentation, particularly the section titled 'jQuery script'. This function grabs the selector from the href value, filters your instance of Isotope, and then pushes it through BBQ hash history management.

I would make sure you have a function bound to hashchange as well, exactly what is written in the documentation. It's very important to make sure you are hooking into BBQ's hashchange event to make your filtered content bookmarkable.

UPDATE

You've got two functions hooked up on click. You really only need the second one which will then fire the Isotope filter from the hashchange event.

Have a look at the following code and compare to your earlier example: http://jsfiddle.net/HWwa4/1/