check if div has overflow

Question

I'd like to check if a <div> has overflow and show a link if it does. I have three divs with same classes. I want to check each div for overflow and show or hide link. This is my html:

<div id="tab-1" class="tab-panel active" >
  <div>
    LETO 2015: ALNJA
    <br>
    <br>
    Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
  </div>
  <a id="morelink">more</a>
</div>
<div id="tab-2" class="tab-panel">
  <div>
    Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
  </div>
  <a id="morelink">more</a>
</div>
<div id="tab-3" class="tab-panel">
  <div>
    Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
  </div>
  <a id="morelink">more</a>
</div>`

css:

  .tab-panel {
   position:relative;
   background-color: #f8f8f8;
   color: #000;
   height: 276px;
   line-height: 20px;
   padding:20px;
  }
 .tab-panel div {overflow: hidden;height: 100%;}

By "overflow," are you trying to determine if a div takes up multiple lines? — Rick Hitchcock
– Rick Hitchcock, Commented Sep 1, 2015 at 21:11
no. i need to see if it is overflowing. in my case div with id=tab-1 is overflowing, the html above is just sample it has much more lines in each div. — Dejan Jankov
– Dejan Jankov, Commented Sep 1, 2015 at 21:18
Thanks, not sure I understand your question, but someone else may be able to help you. — Rick Hitchcock
– Rick Hitchcock, Commented Sep 1, 2015 at 21:30

David · Accepted Answer · 2015-09-02 02:36:38Z

12

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>

Also, please note that one issue with your code is that all the links have the same id, morelink should be a class (or have different names).

edited Sep 2, 2015 at 2:36

answered Sep 1, 2015 at 21:51

David

7,3453 gold badges31 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Dejan Jankov Over a year ago

that is what i need,but this code works only for one div in my case. I didn't say that my 3 divs are tab panels. something like this: javascriptbook.com/code/c11/tabs.html

David Over a year ago

Do you mean taht in every tab-panel you have more than one div or element? If so, you can put all the contain of your tabs inside one div. Then it should work.

Dejan Jankov Over a year ago

one tab panel one div. like on that link.

David Over a year ago

In that link there is one <p> element inside each <div class="tab-panel">element. Changing ($('div', this) for ($('p', this) will make my code to work on that website.

Stephen P Over a year ago

@DejanJankov — the main idea here is to compare scrollHeight and clientHeight, and David put together a good example of doing that. If it doesn't exactly meet your situation you should be able to adapt it. Don't expect David to complete your work and hand it to you.

|

Collectives™ on Stack Overflow

check if div has overflow

1 Answer 1

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

Adressing the OP problem

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

Adressing the OP problem

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related