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.
Add a comment
|
3 Answers
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;
}
2 Comments
James
Jason, have you get a test page I can view?
David Hobs
if jQuery here's an even more awesome answer: if ($('#div-id')[0].scrollWidth > $('#div-id').width()) { //Text has over-flowed } ~stackoverflow.com/questions/6406843/…
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
:)
Comments
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.
