Check With Jquery If Div Has Overflowing Elements

Check with jquery if div has overflowing elements

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 < element.scrollHeight ||
    element.offsetWidth < 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<element.childElementCount; i++){
  if (element.children[i].offsetTop + element.children[i].offsetHeight >
      element.offsetTop + element.offsetHeight ||
      element.children[i].offsetLeft + element.children[i].offsetWidth >
      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.

check if div has overflow

EDIT: I made several updates to this answer. The original one didn't meet the needs of the OP because not all the div elements where visible at the same time (see comments). I will first answer the general question: "how to check if a div is overflowed?" and then address the OP problem.

NOTE: I have modified the original html and css to make the example clear.

So we have a container (a div element) that we call 'tab'. It has other div inside that we call 'content'. If 'content' is bigger than 'tab', then 'tab' is overflowed.

The key is to compare scrollHeight and clientHeight attributes of 'content'.

If scrollHeight is bigger than clientHeight, we change the display property of the link to make it visible. We use the id selector to identify 'content'.

HTML:

<div id="tab"> <div id="content">...</div> </div>

JS:

if ($('#content').prop('scrollHeight') > $('#content').prop('clientHeight'))
    //if 'true', the content overflows the tab: we show the hidden link
    $('#myLink').css('display', 'block');
}

What happens if we have more than one 'tab'?

In that case we need to use the each function to wrap the code above and iterate the different 'tabs':

HTML:

<div class="tab"> <div class="content">...</div> </div>
<div class="tab"> <div class="content">...</div> </div>
...

JS:

$('.tab').each( function() {
    if ($('.content', this).prop('scrollHeight') > $('.content', this).prop('clientHeight'))
    $('a', this).css('display', 'block');
});

Note how we use now class selectors and we search the elements in the context of this.

Adressing the OP problem

In this case, just one of the 'tabs' is visible, while the others are hidden until the user raise a event that changes the visibility.

We can not compare the scrollHeight and clientHeight attributes of a hidden element (both will return 0). So we need to make the comparison in the handler of the event that make it visible.

The following snippet manage that situation.

function updateTabs(){  $('.tab-panel').each( function() {    if ($('div', this).prop('scrollHeight') > $('div', this).prop('clientHeight'))      $('a', this).css('display', 'block');  });}
$('span').click( function() {  $('.tab-panel').removeClass('active');  $('#'+$(this).data('tab')).addClass('active');  updateTabs();});
updateTabs();

span {  border: 1px solid blue;  padding: 3px;}
.tab-panel {  background-color: #eee;  height: 76px;  padding: 30px;  display: none;}
.tab-panel.active {  display: block;}
.tab-panel div {  overflow: hidden;  height: 100%;  border: 1px solid red;}
.show-more {  display: none;  margin: 5px;  border: 1px solid blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-tab="tab-1">Tab 1</span><span data-tab="tab-2">Tab 2</span><span data-tab="tab-3">Tab 3</span><hr>
<div id="tab-1" class="tab-panel active">  <div>    I have a lot of text.    <br>I have a lot of text.    <br>I have a lot of text.    <br>I have a lot of text.    <br>I have a lot of text.    <br>  </div>  <a class="show-more">more</a></div>
<div id="tab-2" class="tab-panel">  <div>    I have little text.    <br>  </div>  <a class="show-more">more</a></div>
<div id="tab-3" class="tab-panel">  <div>    I have a lot of text.    <br>I have a lot of text.    <br>I have a lot of text.    <br>I have a lot of text.    <br>I have a lot of text.    <br>  </div>  <a class="show-more">more</a></div>

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

if ($("#myoverflowingelement").prop('scrollWidth') > 
 $("#myoverflowingelement").width() ) {
  alert("this element is overflowing !!");  
}
else {
  alert("this element is not overflowing!!"); 
}

.scrollbox {  overflow: auto;  width: 200px;  max-height: 200px;  margin: 50px auto;
  background:    /* Shadow covers */    linear-gradient(white 30%, rgba(255,255,255,0)),    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,        /* Shadows */    radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;  background:    /* Shadow covers */    linear-gradient(white 30%, rgba(255,255,255,0)),    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,        /* Shadows */    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;  background-repeat: no-repeat;  background-color: white;  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;    /* Opera doesn't support this in the shorthand */  background-attachment: local, local, scroll, scroll;}

<div class="scrollbox">  <ul>    <li>Not enough content to scroll</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>  </ul></div>

<div class="scrollbox">  <ul>    <li>Ah! Scroll below!</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>    <li>7</li>    <li>8</li>    <li>9</li>    <li>10</li>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>    <li>7</li>    <li>8</li>    <li>The end!</li>    <li>No shadow there.</li>  </ul></div>

var pageWidth = $(".page").width();var elementWidth = $(".element").width();var elementLeft = $(".element").position().left;
if (pageWidth - (elementWidth + elementLeft) < 0) {  alert("overflow!");} else {  alert("doesn't overflow");}

.page {  overflow: hidden;  width: 200px;  height: 200px;  position: relative;  background: black;}
.element {  width: 100px;  height: 100px;  position: absolute;  background: blue;  top: 10px;  left: 150px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">  <div class="element">  </div></div>

if($('label').width() > $('div').width()){
   // longer element 
}

$.fn.HasScrollBar = function() {
    //note: clientHeight= height of holder
    //scrollHeight= we have content till this height
    var _elm = $(this)[0];
    var _hasScrollBar = false; 
    if ((_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)) {
        _hasScrollBar = true;
    }
    return _hasScrollBar;
}