CODEWITHSUNDEEP
jqueryhtmlfilteringjquery-isotope
Sam Skirrow
Sam Skirrow

Reputation: 3697

jQuery isotope filtering without hiding items

I am trying to use the jQuery isotope plugin (http://isotope.metafizzy.co) on a site I am building. In essense what I am trying to do is filter results which I have managed to do. HOWEVER, when I filter results, I don't want the other results to disappear, I just want the filtered option to come to the front.

I've been scratching my head for hours over this. Here is my jQuery:

$(function(){

  var $container = $('#cards');

  $container.isotope({
    itemSelector : '.blank'
  });


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

  $optionLinks.click(function(){
    var $this = $(this);

    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('.option-set');
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');

    value = value === 'false' ? false : value;
    options[ key ] = value;
    if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {

      changeLayoutMode( $this, options )
    } else {

      $container.isotope( options );
    }

    return false;
  });    
});

and my (simplified) html:

<section id="options" class="clearfix">
<ul id="filters" class="option-set clearfix" data-option-key="filter">
    <li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
    <li><a href="#filter" data-option-value=".christmas">Christmas</a></li>
    <li><a href="#filter" data-option-value=".birthday">Birthday</a></li>
    <li><a href="#filter" data-option-value=".thank-you">Thank You</a></li>
  </ul>


<div id="cards">
<div class="blank christmas"></div>
<div class="blank christmas"></div>
<div class="blank christmas"></div>
<div class="blank christmas"></div>
<div class="blank birthday"></div>
<div class="blank birthday"></div>
<div class="blank birthday"></div>
<div class="blank thank-you"></div>
<div class="blank thank-you"></div>

and a link on JSfiddle (although the animation doesn't appear to be working - but it works on my site so no issues): http://jsfiddle.net/Yvv5x/3/

Any help would be appreciated.

Upvotes: 0

Views: 977

Answers (1)

alexcasalboni
alexcasalboni

Reputation: 1724

Here is the working fiddle.

You don't actuallyneed filtering, but sorting. Therefore I've created three different sorting situations (christmas, birthday and thankyou), with the corresponding data-* attribute for each item (eventually you can set this attribute by code).

Furthermore, you were calling

$container.isotope({
    itemSelector : '.blank'
});

at the beginning, without all the needed options.

Upvotes: 1

Related Questions