title: How can I display "No results Match that criteria" after a list has been filtered?
body: <p>So I have created a pretty simple filtering navigation for a list, see the JS fiddle</p>
  
  <p>As you can see there is an option number six, however there is no criteria for number six. </p>
  
  <p>So when "FILTER SIX" is clicked the current list appears blank.</p>
  
  <p>However I would like a message to appear something like "No Results Match That Criteria."</p>
  
  <p><a href="http://jsfiddle.net/H9Gj3/" rel="nofollow">http://jsfiddle.net/H9Gj3/</a></p>
  
  <pre><code>$('#filterOptions div').click(function () {
      // fetch the class of the clicked item
      var ourDataAttr = $(this).data('name');
      // reset the active class on all the buttons
      $('#filterOptions div').removeClass('active');
      // update the active state on our clicked button
      $(this).addClass('active');
      if (ourDataAttr == 'all') {
          // show all our items
          $('#content').find('.item').fadeIn(500);
      } 
      else {
          // hdatee all elements that don't share ourClass
          $('#content').find('.item:not([data-name="' + ourDataAttr + '"])').fadeOut(500);
          // show all elements that do share ourClass
          $('#content').find('.item[data-name="' + ourDataAttr + '"]').fadeIn(500);
      }
      return false;
  });
  </code></pre>