title: Count Table Rows Hidden In Overflow with Javascript
body: <p>I have a bootstrap 3 dashboard where I am hiding the overflow in a particular div. I need to be able to identify the number of table rows hidden in the overflow that are not visible in the div. jQuery method preferred but vanilla JS also fine.</p>
  
  <p>have been trying to sort this out and have not been able to find any ways so far to count the number of rows that are hidden in overflow.</p>
  
  <p>NB: There is no markup difference between the rows that are visible and those that are not visible as CSS is used to hide the excess rows using <code>overflow: hidden;</code> on the parent DIV.</p>
  
  <p>Thanks.</p>
  
  <p>Additional #1
  Here is the HTML I am working with. The height is set by javscript at runtime.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="jobs-list" class="box-body no-padding job-list" style="overflow: hidden;"&gt;
      &lt;table class="table"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th&gt;Account&lt;/th&gt;
      &lt;th class="text-center"&gt;Due&lt;/th&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
      &lt;td&gt;
       Customer 1 (MCB#123456789)&lt;br /&gt;
       &lt;small&gt;Job name&lt;/small&gt;
      &lt;/td&gt;
      &lt;td class="text-center text-green"&gt;-- TODAY --&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
      &lt;td&gt;
       Customer 2 (MCB#123456789)&lt;br /&gt;
       &lt;small&gt;Job name&lt;/small&gt;
      &lt;/td&gt;
      &lt;td class="text-center text-green"&gt;-- TODAY --&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
      &lt;td&gt;
       Customer 3 (MCB#123456789)&lt;br /&gt;
       &lt;small&gt;Job name&lt;/small&gt;
      &lt;/td&gt;
      &lt;td class="text-center text-green"&gt;-- TODAY --&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
      &lt;td&gt;
       Customer 4 (MCB#123456789)&lt;br /&gt;
       &lt;small&gt;Job name&lt;/small&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;-- TOMORROW --&lt;/td&gt;
     &lt;/tr&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="box-footer text-center"&gt;
   152 More Jobs
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see in the example above I am using a bootstrap 3 box to contain the data. The height of <code>.box-body</code> is set using javascript (which works fine already and is based on the window height). By using the <code>overflow: hidden;</code> CSS rule instead of showing scroll bars on <code>.box-body</code> the overflow is hidden and not visible. I need to be able to adjust the text in <code>.box-footer</code> using javascript to identify the number of rows that are not visible.</p>