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.

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.

• javascript
• html
• overflow
• detection

3 Answers 3

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;
}

Googling turns up this:

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

looks nice and framework independent.

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

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

javascript detect overflow 

:)

My approach would be to work from how new DIVs get added. Whatever event causes this to happen, I would add a handler to the document that runs a script which checks the size of the various DIVs to ensure that they meet your requirements. If they are too large (or too many), then you hide some of them and add your button with it's display logic.