jQuery Isoptope Setting Default Sorting Filter Through URL

Question

I am wondering what is the issue with this fiddle: http://jsfiddle.net/GwBa8/150/

I want to change which category loads by default using different links without having to add extra pages to my site. The last working state is this fiddle http://jsfiddle.net/GwBa8/128/. The only difference is the following code added to the start of the jQuery.

 //e.g. website.com/index/filter/games
  var $criteria = '*';
  var str = window.location.pathname;

  //games
  if (str.substring(str.lastIndexOf('#'))) {
     var $criteria='.'+str.substring(str.lastIndexOf('#'));
} else {
    var $criteria = '*';
}

Why does this code stop it working?

I would like to have something like www.website/index#games to load games by default.

Thanks!

Answer 1

Based on @nchaud comment...

$(window).load(function(){

 //e.g. website.com/index/filter#games
  var str = document.URL;

     //games
  if ((str.lastIndexOf('#'))!== -1) {
     var $criteria=str.substring(str.lastIndexOf('#'));


} else {
    var $criteria = '#all';

}

This sets the variable $criteria to the matching id of the link for the category in the navigation.

var $container = $('.creations-container');
$container.isotope({
    filter: '*',
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
    }
});

$('.creations-filter a').click(function(){
    $('.creations-filter .current').removeClass('current');
    $(this).addClass('current');

    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector,
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
     });
     return false;
    }); 
$($criteria).trigger("click");

this clicks on the element with the id in the url

Answer 2

You could do something like (untested!)

$(window).load(function(){

  //e.g. website.com/index/filter/games
  var str = window.location.pathname;

  //games
  var criteria=str.substring(str.lastIndexOf('/'));

  var $container = $('.creations-container');
  $container.isotope({
      filter: '.' + 'criteria',
  }

});