Is there a way to detect overflow using JavaScript in html?

Question

I'm currently attempting to make a div with text content on a web page with a "see more" button that will allow the box to expand and un-hide the overflow content. However I only want the "see more" to be visible if there is actually overflow.

Is there some way, in JavaScript, or otherwise that I can detect this?

See: http://jsfiddle.net/AJ277/

bjb568 · Accepted Answer · 2014-04-09 00:36:20Z

3

if (element.scrollHeight > element.offsetHeight) {
    alert('Overflow!');
}

Fiddle

edited Apr 9, 2014 at 0:36

answered Apr 9, 2014 at 0:27

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

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

Comments

VVV · Accepted Answer · 2014-04-09 00:29:15Z

2

You could simply add a wrapper around the text and compare the wrapper height to the parent height.

FIDDLE

JS

if ($('.wrapper').height() > $('#text').height()) {
    //do stuff
}
else { 
    //do other stuff like hide buttons 
}

HTML

<div id="text">
    <div class="wrapper">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in rutrum lorem. Donec eget turpis arcu. Fusce at neque libero. Nam sed risus velit. Fusce eleifend leo ac laoreet dapibus. Morbi vel tincidunt tortor. Vivamus placerat elit nec mi pulvinar, vitae volutpat nisi tempus.</div>
</div>
<button id="show">show more (only show this button if there is overflow)</button>
<button id="hide" style="display: none">hide</button>

answered Apr 9, 2014 at 0:29

VVV

7,6033 gold badges37 silver badges55 bronze badges

5 Comments

bjb568 Over a year ago

Your fiddle doesn't work. You just disabled the click events, so the button is still there and when you resize it down then the buttons are useless.

VVV Over a year ago

@bjb568 Fiddle works, you just need to modify the amount of text to see different result.

bjb568 Over a year ago

No… It doesn't. The buttons don't disappear (or reappear) when you resize your window.

VVV Over a year ago

@bjb568, If you remove enough text, the button dissapears. But unlike your post, it doesn't check on browser resize.

bjb568 Over a year ago

People resize their windows. You can't just tell all users to not resize their windows.

Collectives™ on Stack Overflow

Is there a way to detect overflow using JavaScript in html?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related