CODEWITHSUNDEEP
jqueryjquery-isotope
davidpauljunior
davidpauljunior

Reputation: 8338

Isotope v2 show 'no items' <div> if no items

In the first version of Isotope, it applied classes to the items when they were hidden (.isotope-hidden). In this new version 2, those classes aren't applied.

My old script (note I'm using the combination filter so this comes inside an item click function) worked fine like this:

$container.isotope({ filter: selector }, function noResultsCheck() {
     var numItems = $('.device:not(.isotope-hidden)').length;
     var noItemsAlert = $('#equipment-list-container .alert');
     if (numItems == 0) {
       noItemsAlert.show(250);
     } else {
       noItemsAlert.hide(250);
     }
});

But because there's no such thing as .isotope-hidden anymore I'm struggling to make it work. I tried the following but no success:

$container.isotope({ filter: filterValue }, function noResultsCheck() {
    var numItems = $('.device:visible').length;
    var noItemsAlert = $('#equipment-list-container .alert');
    if (numItems == 0) {
      noItemsAlert.show(250);
    } else {
      noItemsAlert.hide(250);
    }
});

Upvotes: 0

Views: 1136

Answers (2)

Pavelescu Razvan
Pavelescu Razvan

Reputation: 77

Basically all you have to do is copy the code provided

// Add hidden class if item hidden
var itemReveal = Isotope.Item.prototype.reveal;
Isotope.Item.prototype.reveal = function() {
itemReveal.apply( this, arguments );
jQuery( this.element ).removeClass('isotope-hidden');
};
var itemHide = Isotope.Item.prototype.hide;
Isotope.Item.prototype.hide = function() {
itemHide.apply( this, arguments );
jQuery( this.element ).addClass('isotope-hidden');
};

to the end of isotope.pkgd.js before the })( window ); line

Thanks a lot!

Upvotes: 0

davidpauljunior
davidpauljunior

Reputation: 8338

Found a solution.

To add the 'isotope-hidden' class back in when hidden:

// Add hidden class if item hidden
  var itemReveal = Isotope.Item.prototype.reveal;
  Isotope.Item.prototype.reveal = function() {
    itemReveal.apply( this, arguments );
    $( this.element ).removeClass('isotope-hidden');
  };

var itemHide = Isotope.Item.prototype.hide;
Isotope.Item.prototype.hide = function() {
  itemHide.apply( this, arguments );
  $( this.element ).addClass('isotope-hidden');
};

It seems that in the latest version you can't place a callback in the same place you previously could. You now use 'layoutComplete' and place it after the #filters click function.

// Just showing where filters code would be...
$('#filters').on( 'click', '.btn', function() {
  ...
  $container.isotope({ filter: filterValue });
});

// Show alert if no items returned
var noItemsAlert = $('#equipment-list-container .alert');
$container.isotope( 'on', 'layoutComplete', function() {
  var numItems = $container.find('.item:not(.isotope-hidden)').length;
  if (numItems == 0) {
    noItemsAlert.show(250);
  } else {
    noItemsAlert.hide(250);
  }
});

Demo

Upvotes: 3

Related Questions