Detecting horizontal div overflow with JavaScript?

Question

I have a DIV that has plenty of child DIVs inside of it. What I want is similar to Firefox's tabs, when you have too many tabs open or the main DIV width is too small, the interface will detect overflow and show a button on the right side to list all hidden tabs. The problem is that I have no idea where to even start looking for help.

Answer 1

Is you main DIV set to overflow:hidden?

If so, you can test its need to overflow by incrementing the scrollLeft property and then querying it to see if it's changed:

function containsTooMuch(el) {
    var original = el.scrollLeft++;
    return el.scrollLeft-- > original;
}

Answer 2

Googling turns up this:

http://knitinr.blogspot.com/2008/08/javascript-warn-if-overflow.html

looks nice and framework independent.

But maybe somebody comes up with a solution that works with less code.

Oh and guess which popular coding community site screws up the Googe results for

javascript detect overflow 

:)