Jquery - How to detect if elements gets hidden by a overflow:hidden; container?

Question

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

Here's the context of what we want:

Let's image we are mouse-hover item 3:

We normally have:

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

Like this, the sub 3.2 will be out of the flow and not be visible, OR (if we use clearfix on container instead of overflow), it will drop down over other page contents), in order to solve this, we think this one is a better solution, again, supposing we mouse-hover item 3:

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

In order to do this, perhaps, we should detect if the element is out of the flow, and, it it his, push the all thing up X px;

If this is a good aproach to solve this, how can we detect if an element it's out of the flow?

If this isn't a good approach, can you please suggest another ?

ps- we are using superfish as a jquery menu solution.

Answer 1

I might have a quick jQuery solution, your question is tagged that way, if you need pure CSS solution or I took the wrong plugin, we can think of something else... Never used superfish myself but I checked out the "vertical style" example from this site : http://users.tpg.com.au/j_birch/plugins/superfish/

So, when you mouseover item 3 you'd like to see sub 3.1 at level of item 1? After taking a quick look into this plugin's code I believe you simply need to modify showSuperfishUl() that has a line that ends like this :

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

Assuming your items and subs are the same height, and replacing the context with $(this), you could 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 would need to setup a real page to find out if it works in a real context... "top" will probably not work with this relative/float:left layout, but in your "conceptual level" that's almost it.