Display 'no items' message when using jQuery plugin to filter list items
<p>I'm using the '<a href="http://css-tricks.com/2480-filtering-blocks/" rel="nofollow">Filtering Blocks</a>' tutorial on the CSS-Tricks website which allows you to filter a list of items by category.</p>

<p>It's working great on an events website I'm working on, but there is no way to display a message if there are no items in a category e.g. 'There are no upcoming events in this category'.</p>

<p>The code works by matching an ID in the category navigation with a class in the main listing. 'style="display: none;"' is added to any list item which doesn't match the user's selected category.</p>

<p>Here is the category navigation markup:</p>

<pre><code>&lt;ul id="category-filter"&gt;
    &lt;li&gt;&lt;a href="#" id="all" class="current"&gt;VIEW ALL&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="arts" class="filter"&gt;Arts&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="conference" class="filter"&gt;Conferences&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="exhib" class="filter"&gt;Exhibitions&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="faith" class="filter"&gt;Faith&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="lecture" class="filter"&gt;Lectures&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="open" class="filter"&gt;Open days&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="sport" class="filter"&gt;Sport&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Here is an example of a few events:</p>

<pre><code>&lt;ul id="events-list"&gt;
    &lt;li class="event open"&gt;
        &lt;h3&gt;&lt;a href="#"&gt;Open day title&lt;/a&gt;&lt;/h3&gt;
        &lt;small&gt;Date and time&lt;/small&gt;
    &lt;/li&gt;
    &lt;li class="event conference"&gt;
        &lt;h3&gt;&lt;a href="#"&gt;Conference title&lt;/a&gt;&lt;/h3&gt;
        &lt;small&gt;Date and time&lt;/small&gt;           
    &lt;/li&gt;
    &lt;li class="event sport"&gt;
        &lt;h3&gt;&lt;a href="#"&gt;Sport title&lt;/a&gt;&lt;/h3&gt;
        &lt;small&gt;Date and time&lt;/small&gt;           
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And finally, the jQuery code:</p>

<pre><code>$(function(){

    $("#all").click(function(){
        $(".event").slideDown("fast");
        $("#category-filter a").removeClass("current");
        $(this).addClass("current");
        return false;
    });

    $(".filter").click(function(){
        var thisFilter = $(this).attr("id");
        $(".event").slideUp("fast");
        $("."+ thisFilter).slideDown("fast");
        $("#category-filter a").removeClass("current");
        $(this).addClass("current");
        return false;
    });

});
</code></pre>

<p>Is it possible to change or add to this code to display a 'no events' message when appropriate? If so, any help would be greatly appreciated as I simply don't know where to start!</p>

<p>Many thanks in advance.</p>
