---

title: Hash history

layout: default

category: demos

---

  <section id="copy">

    <p><a href="http://benalman.com/projects/jquery-bbq-plugin/">jQuery BBQ</a> by Ben Alman allows you to use hash history to save Isotope options. Try clicking a couple options then hitting the back button, or copying the URL and pasting it into a new window.</p>

  </section>

  <section id="options" class="clearfix">

    <h3>Filters</h3>

    <ul class="option-set clearfix">

      <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=.post-transition">post-transition</a></li>

      <li><a href="#filter=.nonmetal">nonmetal</a></li>

      <li><a href="#filter=.inner-transition">inner-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>

    <h3>Sort</h3>

    <ul class="option-set clearfix">

      <li><a href="#sortBy=original-order" class="selected">original-order</a></li>

      <li><a href="#sortBy=name">name</a></li>

      <li><a href="#sortBy=symbol">symbol</a></li>

      <li><a href="#sortBy=number">number</a></li>

      <li><a href="#sortBy=weight">weight</a></li>

      <li><a href="#sortBy=category">category</a></li>

      <li><a href="#sortBy=random">random</a></li>

    </ul>

    <h3>Sort direction</h3>

    <ul class="option-set clearfix">

      <li><a href="#sortAscending=true" class="selected">sort ascending</a></li>

      <li><a href="#sortAscending=false">sort descending</a></li>

    </ul>

    <h3>Layout modes</h3>

    <ul class="option-set clearfix">

      <li><a href="#layoutMode=masonry" class="selected">masonry</a></li>

      <li><a href="#layoutMode=fitRows">fitRows</a></li>

      <li><a href="#layoutMode=cellsByRow">cellsByRow</a></li>

      <li><a href="#layoutMode=straightDown">straightDown</a></li>

    </ul>

  </section> <!-- #options -->

  <div id="container" class="variable-sizes clearfix">

    {% for elem_number in site.random_order | limit:60 %}

      {% assign element = site.elements[elem_number] %}

      {% include element-partial.html %}

    {% endfor %}

  </div> <!-- #container -->

  <script src="../{{ site.jquery_js }}"></script>

  <script src="../{{ site.isotope_js }}"></script>

  <script src="../js/jquery.ba-bbq.min.js"></script>

  <script>

    $(function(){

      var $container = $('#container'),

          // object that will keep track of options

          isotopeOptions = {},

          // defaults, used if not explicitly set in hash

          defaultOptions = {

            filter: '*',

            sortBy: 'original-order',

            sortAscending: true,

            layoutMode: 'masonry'

          };

      {% include random-sizes.js %}

      var setupOptions = $.extend( {}, defaultOptions, {

        itemSelector : '.element',

        masonry : {

          columnWidth : 120

        },

        cellsByRow : {

          columnWidth : 240,

          rowHeight : 240

        },

        getSortData : {

          symbol : function( $elem ) {

            return $elem.attr('data-symbol');

          },

          category : function( $elem ) {

            return $elem.attr('data-category');

          },

          number : function( $elem ) {

            return parseInt( $elem.find('.number').text(), 10 );

          },

          weight : function( $elem ) {

            return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );

          },

          name : function ( $elem ) {

            return $elem.find('.name').text();

          }

        }

      });

      // set up Isotope

      $container.isotope( setupOptions );

      var $optionSets = $('#options').find('.option-set'),

          isOptionLinkClicked = false;

      // switches selected class on buttons

      function changeSelectedLink( $elem ) {

        // remove selected class on previous item

        $elem.parents('.option-set').find('.selected').removeClass('selected');

        // set selected class on new item

        $elem.addClass('selected');

      }

      $optionSets.find('a').click(function(){

        var $this = $(this);

        // don't proceed if already selected

        if ( $this.hasClass('selected') ) {

          return;

        }

        changeSelectedLink( $this );

            // 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 );

        // apply new option to previous

        $.extend( isotopeOptions, option );

        // set hash, triggers hashchange on window

        $.bbq.pushState( isotopeOptions );

        isOptionLinkClicked = true;

        return false;

      });

      var hashChanged = false;

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

        // get options object from hash

        var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {},

            // do not animate first call

            aniEngine = hashChanged ? 'best-available' : 'none',

            // apply defaults where no option was specified

            options = $.extend( {}, defaultOptions, hashOptions, { animationEngine: aniEngine } );

        // apply options from hash

        $container.isotope( options );

        // save options

        isotopeOptions = hashOptions;

        // if option link was not clicked

        // then we'll need to update selected links

        if ( !isOptionLinkClicked ) {

          // iterate over options

          var hrefObj, hrefValue, $selectedLink;

          for ( var key in options ) {

            hrefObj = {};

            hrefObj[ key ] = options[ key ];

            // convert object into parameter string

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

            hrefValue = $.param( hrefObj );

            // get matching link

            $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]');

            changeSelectedLink( $selectedLink );

          }

        }

        isOptionLinkClicked = false;

        hashChanged = true;

      })

        // trigger hashchange to capture any hash data on init

        .trigger('hashchange');

    });

  </script>