JQuery - how to determine if elements are hidden when overflowing: hidden; container?

Question

I have this problem, and I'm still at a conceptual level of understanding how we can determine if a given element is outside the container (container with overflow: hidden, declared property);

Here is the context of what we want:

Let the image we hover over element 3:

Usually we have:

item 1 item 2 item 3 - sub 3.1 - sub 3.2 

Similarly, sub 3.2 will exit the stream and not be visible, OR (if we use clearfix in the container instead of overflow), it will go down over the other contents of the page) to solve this, we think this is the best solution, again, suppose we hover over item 3:

 item 1 item 2 - sub 3.1 item 3 - sub 3.2 

To do this, perhaps we need to determine if the element is outside the stream, and this is it, click everything on X px;

If this is a good approach to solve this problem, how can we determine if there is an element from the stream?

If this is not a very good approach, can you suggest another?

ps- we use superfish as a jQuery menu solution.

Answer 1

I may have a quick jQuery solution, your question will be flagged this way, if you need a clean CSS solution or I took the wrong plugin, we might think about something else ... I never used the superfish myself, but I checked the example " vertical style "from this site: http://users.tpg.com.au/j_birch/plugins/superfish/

So, when you hover over item 3, do you want to see under 3.1 at item level 1? After a quick study of this plugin code, it seems to me that you just need to change showSuperfishUl (), which has a line that ends as follows:

 .find('>ul:hidden').css('visibility','visible'); 

Assuming your elements and sub-sites are the same height and replace the context with $ (this), you can add something similar to these lines:

 if($(this).parent().nextAll().length < $(this).children("li").length) // lower space < subs heights ? { var totalHeight=0; $(this).parent().prevAll().each(function(index) { if(index < $(this).children("li").length) // without this you would have all subs at the level of item 1 { totalHeight += $(this).outerHeight(true); // true for margins } }); ... .css("top","-"+totalHeight+"px"); } 

You will need to tweak the real page to see if it works in a real context ... "top" will probably not work with this relative / float: left layout ratio, but at your "conceptual level", that's almost it.

Answer 2

If you just want to display everything as you described, you can do it with css with position:relative and align:bottom or position:absolute with bottom:?px , but then you have to worry about what happens far.