Keeping count of the overflowing elements in a container
<p>Let's say I have the following markup (jsfiddle provided below)</p>

<pre><code> &lt;div class="masterContainer"&gt; 
        &lt;div class="filterContainerStrip"&gt; 
            &lt;div class="filterButton"&gt;Filter 001&lt;/div&gt;
            &lt;div class="filterButton"&gt;Filter 002&lt;/div&gt;
             ...
        &lt;/div&gt;
        &lt;div class="hiddenFilterCount"&gt; ... 4 filters hidden &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p>Where there may be any variable number of <code>filterButton</code>s in <code>filterContainerStrip</code> but the overflowing <code>filterButtons</code> are dropped down and no longer visible by setting <code>max-width</code>, <code>height</code>, and <code>overflow-y: hidden</code> on the container.</p>

<p>I would like to know how many of the <code>filterButtons</code> are currently hidden so I can display it to the user.</p>

<p>Here is the fiddle  <a href="http://jsfiddle.net/FbXep/2/" rel="nofollow">jsfiddle</a></p>

<p><strong>Updated fiddle</strong></p>

<p>Thanks</p>
