# Hash history with jQuery BBQ

As cool as Isotope is, the only thing that could make it even cooler would be adding bookmark-able URL hashes. Ben Alman’s jQuery BBQ allows us to do just that.

> jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history.

See Demo: Hash history

BBQ is a marvelous plugin that provides for a lot more functionality. The hash history demo uses multiple options (`sortBy`, `sortAscending`, and `layoutMode` in addition to `filter`), the ability to use back-button history, and properly highlights selected links.

Given BBQ’s tremendous capabilities, the code can grow to be a bit complex. Be sure to read through BBQ’s docs and take look at its examples before you dive in and code up your own solution.

## Markup

Instead of setting the option values and keys with `data` attributes, we can add the option in the `href` for each link.

    <ul class="option-set">
      <li><a href="#filter=*" class="selected">show all</a></li>
      <li><a href="#filter=.metal">metal</a></li>
      <li><a href="#filter=.transition">transition</a></li>
      <li><a href="#filter=.alkali%2C+.alkaline-earth">alkali and alkaline-earth</a></li>
      <li><a href="#filter=%3Anot(.transition)">not transition</a></li>
      <li><a href="#filter=.metal%3Anot(.transition)">metal but not transition</a></li>
    </ul>

The `href` value is a serialized string, suitable for a URL. These values can be created with jQuery.param().

    $.param({ filter: '.metal' })
    // >> "filter=.metal"
    $.param({ filter: '.alkali, alkaline-earth' })
    // >> "filter=.alkali%2C+alkaline-earth"
    $.param({ filter: ':not(.transition)' })
    // >> "#filter=%3Anot(.transition)"

## jQuery script

These serialized `href` values can be converted into their proper jQuery object form when clicked using jQuery.deparam() from jQuery BBQ.

    $('.option-set a').click(function(){
          // get href attr, remove leading #
      var href = $(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;
    });

Calling $.bbq.pushState() will trigger the `hashchange` event. At that point, we can parse the hash from the URL and use it to trigger the proper change in the Isotope instance.

    $(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');

Now any filter buttons that are clicked will update the URL hash, so these options can be bookmarked.