Detecting horizontal div overflow with javascript?

Question

I have a DIV in which there are many child DIVs inside. What I want is like Firefox tabs, when you have too many tabs, or the main DIV width is too small, the interface will detect an overflow and display a button on the right side to display all hidden tabs. The problem is that I have no idea where to even start looking for help.

Answer 1

Is the main DIV set to overflow:hidden ?

If this is the case, you can check its overflow need by increasing the scrollLeft property and then scrollLeft it to see if it has changed:

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

Answer 2

Googling calls this:

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

Looks beautiful and structure independent.

But maybe someone will come up with a solution that works with less code.

Oh, and guess which popular coding community site spins Googe results for

 javascript detect overflow 

:)

Answer 3

My approach will be to work with how new DIVs are added. Whatever event occurs, I would add a document handler that runs a script that checks the size of the various DIVs to make sure they match your requirements. If they are too large (or too much), then you hide some of them and add your button with the display logic.