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

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

:)

Answer 2

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.

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

Answer 4

Hi rFactor, I just stumbled upon this post looking for something else but thought I'd share with you a plugin I made a while back to do precisely what you were looking to do (create firefox like tabs)! I made a jquery plugin that will scroll tabs outside of the overflow and creat a dropdown menu of all tabs. Enjoy the fruits of my labor!

http://blackmarketcandyshop.com/sandbox/taboverflow/