It's about html/css/javascript menu ;)
I am looking for unified solution to hide extra tabs of horizontal/tabbed menu when it overflows it's container.
The initial idea plagiarized from firefox tabs workflow, i.e. when you have too much tabs it will wrap extra ones into collapsible dropdown button "List all tabs".
I am thinking to play with overflow:auto in conjunction with javascript, but is there anything like this already implemented or maybe some better idea?
Thanks.
overflow:auto may be a difficult if not impossible thing to accurately monitor with javascript. There are two things you should probably monitor here: a parent container, and the UL that contains the tabs (presumably links within LIs). You can make quantitative comparisons between the widths of both elements in javascript pretty reliably.
I'm not sure which library you prefer to use, but YUI has a really powerful utility that would be applicable - Region. It returns an object full of useful properties about an element - its position in the document, size, and intersections with other elements (see http://www.wait-till-i.com/2007/08/28/monitoring-element-size-and-position-with-the-yui/).
Regardless of what library you end up using (or none at all), the concepts behind Region should help you get moving in the right direction.