5

I'm using isotope to filter a list with multiple filters where it is possible that based on a combination of certain filters no items will be displayed. In this case I want to display a message to the user that based on their filter parameters, no results exist. How would I go about that and does isotope have something built in to handle this? Here is a jsfiddle example. should be displayed if no items match filter set...

http://jsfiddle.net/cssguru/e4vA3/

   $(function(){

   var $container = $('#container'),
      $checkboxes = $('#filters input');

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

   $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join('');
    $container.isotope({ filter: filters });
   });

   });

4 Answers 4

8

You can could to see how many isotope items do not have the "isotope-hidden" class added to it. When the result is 0, it means that all of your elements will be hidden and you can trigger something to happen. You could use a callback function, like reLayout to run every time the isotope gets filtered.

function noResultsCheck() {
    var numItems = $('.item:not(.isotope-hidden)').length;
    if (numItems == 0) {
        //do something here, like turn on a div, or insert a msg with jQuery's .html() function
        alert("There are no results");
    }
}

Add this to your change function:

$container.isotope( 'reLayout', noResultsCheck );

http://jsfiddle.net/xvU8D/

1
  • This is perfect! Thanks... I added a pink block. How would I go about hiding it by default and showing it when no items exist. It should also be hidden again if the user updates the filters to return results... jsfiddle.net/cssguru/xvU8D/1 Jan 30, 2013 at 17:27
4

Just to add to what nspace said...

You don't need to add the 'reLayout' callback, you can make the callback in the code you already had here $container.isotope({ filter: filters }); like this:

$container.isotope({ filter: filters }, function noResultsCheck() {
    var numItems = $('.item:not(.isotope-hidden)').length;
        if (numItems == 0) {
        alert("There are no results");
    }
});

http://jsfiddle.net/xvU8D/33/

This is taken from the docs here: http://isotope.metafizzy.co/docs/introduction.html#script - do a page search for 'callback'.

0
2

Just found a great solution at isotopes github issue-page.


Isotope v1:

$container.isotope({ filter: '.my-crazy.awesome.filter' });


if ( !$container.data('isotope').$filteredAtoms.length == 0) {
    // do stuff when no element was found
}

See Isotope Help - accessing the instance


Isotope v2

if ( !$container.data('isotope').filteredItems.length == 0) {
    // do stuff when no element was found
}

See Isotope - Filtered Items


see full post here

0
0

In addition, to work in Isotope 2 you have to check if it is visible/not visible instead of having the class isotope-hidden:

Like this

var numItems = $('.item:visible').length;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.