CSS:
.blue
{
width:200px;
height:200px;
background-color:blue;
color:#000000;
overflow:auto;
}
JavaScript:
function addChar() {
$('.blue').append('some text ');
}
HTML:
<div id='blue1' class="blue"></div><br />
<a href='javascript:void(0)' onclick='addChar()'>Add</a>
div id='blue1'
has overflow
property set to auto
. I want to detect overflow when it happens.
/// this is my solution
Here's a plugin i wrote, which might come in handy if you want to find out if an element is overflown or not: https://github.com/ZetaSoftware/jquery-overflown-plugin.
With this plugin, in the original example, you could just do:
$("#blue1").overflown()
to find out of children of #blue1 are overflowing.As far as I know you will have to compare the
width/clientWidth
andheight/clientHeight
in youraddChar()
function. When that changes you've got scrollbars (unless you moddify the dimensions somewhere else ...)Something like this:
One-liner solution to the specific question:
Just wanted to golf a bit. :]
(Note: This is only for horizontal overflow detection; it's trivial to add vertical overflow detection as well.)
here i'm just preventing the height, but i think this method can be used to width too.
Example: