CODEWITHSUNDEEP
javascripthtmloverflowdetection
Tower
Tower

Reputation: 102765

Detecting horizontal div overflow with JavaScript?

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.

Upvotes: 4

Views: 6094

Answers (3)

James
James

Reputation: 111870

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

Upvotes: 5

tvanfosson
tvanfosson

Reputation: 532435

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.

Upvotes: 2

Pekka
Pekka

Reputation: 449385

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

:)

Upvotes: 4

Related Questions