I have a calendar that has list of events per day. Currently I show a maximum of 3 events per day and allow the user to toggle to expand the list.

I hide the list with overflow:hidden and max-height:XXpx property. I am trying to detect the events that are currently hidden within that list.

I've looked around and cant find anything that detects this specifically

I have tried:

if (element.offsetHeight < element.scrollHeight || element.offsetWidth < element.scrollWidth) {
     // element has overflow value
 } else {
     // element doesn't have overflow value
 }

and both element.offsetHeight & element.scrollHeight return the same value for any of the elements in my list.

I have a calendar that has list of events per day. Currently I show a maximum of 3 events per day and allow the user to toggle to expand the list.

I hide the list with overflow:hidden and max-height:XXpx property. I am trying to detect the events that are currently hidden within that list.

I've looked around and cant find anything that detects this specifically

I have tried:

if (element.offsetHeight < element.scrollHeight || element.offsetWidth < element.scrollWidth) {
     // element has overflow value
 } else {
     // element doesn't have overflow value
 }

and both element.offsetHeight & element.scrollHeight return the same value for any of the elements in my list.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 12, 2015 at 16:56 Philippe Fisher asked Jun 12, 2015 at 13:54 Philippe FisherPhilippe Fisher 59688 silver badges2828 bronze badges 3

• possible duplicate of Check with jquery if div has overflowing elements – Dylan Corriveau Commented Jun 12, 2015 at 13:57
• try to write a selector with css relative position top which is higher than the innerHeight of container – Dickens A S Commented Jun 12, 2015 at 13:57
• @DylanCorriveau I check all other solutions out there and none of them work with this case, the only one I can't seem to get working to test it out is the if (element.offsetHeight < element.scrollHeight || element.offsetWidth < element.scrollWidth) { // element has overflow value } else { // element doesn't have overflow value } – Philippe Fisher Commented Jun 12, 2015 at 14:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

scrollHeight and scrollWidth are DOM properties, not jQuery.

$('div').each(function() {
     // get scroll measurements from DOM element
     var contentHeight = this.scrollHeight;
     var contentWidth = this.scrollWidth;
     // get the visible measurements from jQuery object
     var $this = $(this);
     var visibleHeight = $this.height();
     var visibleWidth = $this.width();

     if (visibleHeight < contentHeight
         || visibleWidth < contentWidth ) {
         // element has overflow value
     } else {
         // element doesn't have overflow value
     }
 })

you should check offsetHeight and scrollHeight or offsetWidth and scrollWidth for that:

 $("ul li").each(function(){
     var element = $(this);
     if (element.height() < element.scrollHeight || element.width() < element.scrollWidth) {
         // element has overflow value
     } else {
         // element doesn't have overflow value
     }
 });