Check with jquery if div has overflowing elements

Question

I have a div with a fixed height and overflow hidden   I want to check with jQuery if the div has elements that are overflowing past the fixed height of the div  How can I do this

User · Accepted Answer

You actually don t need any jQuery to check if there is an overflow happening or not  Using element offsetHeight  element offsetWidth   element scrollHeight and element scrollWidth you can determine if your element have content bigger than it s size   if  element offsetHeight  lt  element scrollHeight        element offsetWidth  lt  element scrollWidth           your element have overflow   else          your element doesn t have overflow     See example in action  Fiddle  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     If you want to count semi-visible items it would be the script you need   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               And if you don t want to count semi-visible you can calculate with a little difference

User · Answer

So I used the overflowing jquery library  https   github com kevinmarx overflowing  After installing the library  if you want to assign the class overflowing to all overflowing elements  you simply run        targetElement   overflowing   parentElement     This will then give the class overflowing  as in   lt div class  targetElement overflowing  gt  to all elements that are overflowing  You could then add this to some event handler click  mouseover  or other function that will run the above code so that it updates dynamically

User · Answer

This is the jQuery solution that worked for me  offsetWidth etc  didn t work   function is overflowing element  extra width        return element position   left   element width     extra width  gt  element parent   width        If this doesn t work  ensure that elements  parent has the desired width  personally  I had to use parent   parent     position is relative to the parent  I ve also included extra width because my elements   tags   contain images which take small time to load  but during the function call they have zero width  spoiling the calculation  To get around that  I use the following calling code   var extra width   0      tag visible   each function         if     this  find  img visible   width                 tag image might not be visible at this point             so we add its future width to the overflow calculation            the goal is to hide tags that do not fit one line         extra width    28            if  is overflowing   this   extra width               this  hide                Hope this helps

User · Answer

One method is to check scrollTop against itself   Give the content a scroll value larger than its size and then check to see if its scrollTop is 0 or not  if it is not 0  it has overflow    http   jsfiddle net ukvBf

User · Answer

I had the same question as the OP  and none of those answers fitted my needs  I needed a simple condition  for a simple need   Here s my answer   if      myoverflowingelement   prop  scrollWidth    gt      myoverflowingelement   width         alert  this element is overflowing         else    alert  this element is not overflowing          Also  you can change scrollWidth by scrollHeight if you need to test the either case

User · Answer

Here s a pure jQuery solution  but it s rather messy   var div height     this  height    var vertical div top position     this  offset   top  var lastchild height     this  children  p last-child   height    var vertical lastchild top position     this  children  p last-child   offset   top  var vertical lastchild bottom position   lastchild height   vertical lastchild top position  var real height   vertical lastchild bottom position - vertical div top position   if  real height  gt  div height         overflow div

User · Answer

Partially based on Mohsen s answer  the added first condition covers the case where the child is hidden before the parent    jQuery fn isChildOverflowing   function  child      var p   jQuery this  get 0     var el   jQuery child  get 0     return  el offsetTop  lt  p offsetTop    el offsetLeft  lt  p offsetLeft          el offsetTop   el offsetHeight  gt  p offsetTop   p offsetHeight    el offsetLeft   el offsetWidth  gt  p offsetLeft   p offsetWidth        Then just do   jQuery   parent   isChildOverflowing   child

User · Answer

I fixed this by adding another div in the one that overflows  Then you compare the heights of the 2 divs    lt div class  AAAA overflow-hidden  style  height  20px    gt       lt div class  BBBB   gt          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum       lt  div gt   lt  div gt    and the js      if      AAAA   height    lt      BBBB   height              console log  we have overflow         else           console log  NO overflow           This looks easier

User · Answer

In plain English  Get the parent element  Check it s height  and save that value  Then loop through all the child elements and check their individual heights   This is dirty  but you might get the basic idea  http   jsfiddle net VgDgz

[javascript] Check with jquery if div has overflowing elements

Examples related to javascript

Examples related to jquery

Examples related to html