1 ---

     2 

     3 title: Hash history with jQuery BBQ

     4 category: docs

     5 layout: default

     6 toc:

     7   - { title: Markup, anchor: markup }

     8   - { title: jQuery script, anchor: jquery_script }

     9 

    10 ---

    11 

    12 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](http://benalman.com/projects/jquery-bbq-plugin/) allows us to do just that.

    13 

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

    15 

    16 [**See Demo: Hash history**](../demos/hash-history.html)

    17 

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

    19 

    20 Given BBQ's tremendous capabilities, the code can grow to be a bit complex. Be sure to read through [BBQ's docs](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html) and take look at [its examples](http://benalman.com/code/projects/jquery-bbq/examples/) before you dive in and code up your own solution.

    21 

    22 ## Markup

    23 

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

    25 

    26 {% highlight html %}

    27 

    28 <ul class="option-set">

    29   <li><a href="#filter=*" class="selected">show all</a></li>

    30   <li><a href="#filter=.metal">metal</a></li>

    31   <li><a href="#filter=.transition">transition</a></li>

    32   <li><a href="#filter=.alkali%2C+.alkaline-earth">alkali and alkaline-earth</a></li>

    33   <li><a href="#filter=%3Anot(.transition)">not transition</a></li>

    34   <li><a href="#filter=.metal%3Anot(.transition)">metal but not transition</a></li>

    35 </ul>

    36 

    37 {% endhighlight %}

    38 

    39 The `href` value is a serialized string, suitable for a URL. These values can be created with [jQuery.param()](http://api.jquery.com/jQuery.param/).

    40 

    41 {% highlight javascript %}

    42 

    43 $.param({ filter: '.metal' })

    44 // >> "filter=.metal"

    45 $.param({ filter: '.alkali, alkaline-earth' })

    46 // >> "filter=.alkali%2C+alkaline-earth"

    47 $.param({ filter: ':not(.transition)' })

    48 // >> "#filter=%3Anot(.transition)"

    49 

    50 {% endhighlight %}

    51 

    52 ## jQuery script

    53 

    54 These serialized `href` values can be converted into their proper jQuery object form when clicked using  [jQuery.deparam()](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.deparam) from jQuery BBQ.

    55 

    56 {% highlight javascript %}

    57 

    58 $('.option-set a').click(function(){

    59       // get href attr, remove leading #

    60   var href = $(this).attr('href').replace( /^#/, '' ),

    61       // convert href into object

    62       // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }

    63       option = $.deparam( href, true );

    64   // set hash, triggers hashchange on window

    65   $.bbq.pushState( option );

    66   return false;

    67 });

    68 

    69 {% endhighlight %}

    70 

    71 Calling [$.bbq.pushState()](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.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.

    72 

    73 {% highlight javascript %}

    74 

    75 $(window).bind( 'hashchange', function( event ){

    76   // get options object from hash

    77   var hashOptions = $.deparam.fragment();

    78   // apply options from hash

    79   $container.isotope( hashOptions );

    80 })

    81   // trigger hashchange to capture any hash data on init

    82   .trigger('hashchange');

    83 

    84 {% endhighlight %}

    85 

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