Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You actually don't need any jQuery to check if there is an overflow happening or not. Using <a href="https://developer.mozilla.org/en/DOM/element.offsetHeight" rel="noreferrer"><code>element.offsetHeight</code></a>, <a href="https://developer.mozilla.org/en/DOM/element.offsetWidth" rel="noreferrer"><code>element.offsetWidth</code></a> , <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight" rel="noreferrer"><code>element.scrollHeight</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollWidth" rel="noreferrer"><code>element.scrollWidth</code></a> you can determine if your element have content bigger than it's size:</p> <pre><code>if (element.offsetHeight &lt; element.scrollHeight || element.offsetWidth &lt; element.scrollWidth) { // your element have overflow } else { // your element doesn't have overflow } </code></pre> <p>See example in action: <a href="http://jsbin.com/ujiwah/4/edit#javascript,html,live" rel="noreferrer">Fiddle</a></p> <p>But if you want to know what element inside your element is visible or not then you need to do more calculation. There is three states for a child element in terms of visibility:</p> <p><img src="https://i.stack.imgur.com/O56yk.png" alt="enter image description here"></p> <p>If you want to count semi-visible items it would be the script you need:</p> <pre><code>var invisibleItems = []; for(var i=0; i&lt;element.childElementCount; i++){ if (element.children[i].offsetTop + element.children[i].offsetHeight &gt; element.offsetTop + element.offsetHeight || element.children[i].offsetLeft + element.children[i].offsetWidth &gt; element.offsetLeft + element.offsetWidth ){ invisibleItems.push(element.children[i]); } } </code></pre> <p>And if you don't want to count semi-visible you can calculate with a little difference.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload