title: jQuery: isotope hashchange, filter and back button
body: <p>I'm currently having some problems with the jQuery isotope plugin and hashchange function. I have a grid of divs and on page load ONLY the <code>grid-block-filter</code> divs are showing, clicking on one of the <code>.grid-block-filter</code> divs brings in the relevant content, attaching a hash to the url so the user can navigate to it from elsewhere, this all works fine, here's my example though and I'll explain my problem:<br>
  jsFiddle (with hashes): <a href="http://jsfiddle.net/neal_fletcher/vcffM/9/show" rel="nofollow">http://jsfiddle.net/neal_fletcher/vcffM/9/show</a> <br><br>
  jQuery:</p>
  
  <pre><code>$(document).ready(function () {
  
      var $container = $('#main-grid');
  
      if (location.hash != "") {
          var hashfilter = "." + location.hash.substr(1);
      } else {
          var hashfilter = "*";
      }
  
      $container.imagesLoaded(function () {
          $container.isotope({
              filter: hashfilter + '.nav-block',
              itemSelector: '.grid-block',
              animationEngine: 'best-available',
              masonry: {
                  columnWidth: 4
              }
          });
      });
  
      $('.grid-block-filter a').click(function () {
          var selector = jQuery(this).attr('data-filter');
          var prettyselector = selector.substr(1);
          location.hash = prettyselector;
          return false;
      });
  
      $(window).hashchange(function () {
  
          if (location.hash != "") {
              var hashfilter = "." + location.hash.substr(1);
          } else {
              var hashfilter = "*";
          }
  
  
          $container.imagesLoaded(function () {
              $container.isotope({
                  filter: hashfilter,
                  itemSelector: '.grid-block',
                  animationEngine: 'best-available',
                  masonry: {
                      columnWidth: 4
                  }
              });
          });
      });
  });
  </code></pre>
  
  <p>If you click on <code>ONE FILTER</code> for example, this brings in the relevant content just fine, but then clicking the back button brings back ALL the content, instead of just showing the <code>grid-block-filter</code> as is when the page loads. Is there anyway to stop this happening? I can't figure it out. Any suggestions would be greatly appreciated!</p>