Isotopes Filtering - No Results

Question

I have an Isotope gallery that contains five separate filters that can be applied to sort the gallery. If a person was to choose all five filters it could result in no items being shown.

What I would like to do is show a hidden div if the filters do not return a results. I have looked into trying to do this without any luck.

How do I show a hidden div if an Isotope gallery filters are specific enough not to show any isotope items?

Answer 1

After asking this question I came across my solution. It is a combination of this answer and this answer that are found in this question.

Here is the code I used to do what I am looking for:

var $container = $('#container')
var selector = isoFilters.join('');
$container.isotope({ filter: selector }, function noResultsCheck() {
 var noItems = $('<div class="element no-results"> <!-- HTML for div to show "No Results" --> </div>');
 var yesItems = $('.no-results');
 var numItems = $('.element:not(.isotope-hidden)').length;
   if (numItems == 0) {
       $container.append(noItems).isotope( 'appended', noItems );
   }else{ 
       $container.isotope( 'remove', yesItems);
   }
});