RE: Any events fired when an overflow:hidden container causes some child elements to get hidden?

My belief is that this use case is solved by CSS Regions and Named Flows.

 

The first thing you have to do is to put all the buttons of the menu into a named flow.

 

Your primary menu zone would be the first region where elements would be added and, when it overflows, you can be notified by using the “regionOverflow” property on the element (changes will trigger the ‘regionLayoutUpdate’ event). 

 

When listening to this event, if you notice any overflow, you can make a “more” button appear and use its ‘menu’ as a second region target for the named flow: ie all buttons that were not flushed into the primary zone will flow naturally into this section.

 

Do you think this is solving your problem?

 

 


De : Behrang Saeedzadeh
Envoyé : ‎25‎ ‎mars‎ ‎2013 ‎10‎:‎16
À : W3C CSS Mailing List
Objet : Any events fired when an overflow:hidden container causes some child elements to get hidden?



Hi,



Let's pretend that there's a tall vertical div that is used as a container for menu items, similar to Google+ or the upcoming Facebook News Feed.




When the height of the browser is reduced some menu items get hidden. In such a case, usually a more button is shown that when clicked shows the hidden elements.




One way to do this is by listening to window resize events but that might cause some smoothness issues. It should be possible to hack a solution using dynamically generated media queries as well. Google+, I assume to reduce complexity and lack of a reliable solution, always shows the more button no matter if anything is hidden or not.




But I think it would be helpful to know when an overflown element is hidden/shown via events. What do you think? And is this something that is being worked on?



Cheers,
Behrang Saeedzadeh
http://www.behrang.org