Jquery - Come rilevare se gli elementi vengono nascosti da un overflow: nascosto; contenitore?

Question

Ho questo problema e sono ancora a un livello concettuale di comprensione, come possiamo rilevare se un determinato elemento si trova all'esterno del contenitore (un contenitore con overflow: nascosto, proprietà dichiarata);

Ecco il contesto di ciò che vogliamo:

immagine Let siamo oggetto del mouse-hover 3:

Normalmente ci sono:

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

In questo modo, il sub 3.2 sarà fuori del flusso e non essere visibile, OPPURE (se usiamo clearfix su container invece di overflow), esso scorrerà su altri contenuti della pagina), per risolvere questo, pensiamo che questa sia una soluzione migliore, ancora una volta, supponendo di elemento di passaggio del mouse 3:

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

Per fare ciò, forse, dovremmo rilevare se l'elemento è fuori dal flusso, e, è suo, spingere il tutto su X px;

Se questo è un buon aproach per risolvere questo, come possiamo rilevare se un elemento è fuori dal flusso?

Se questo non è un buon approccio, puoi suggerirne un altro?

ps- stiamo usando superfish come soluzione di menu jquery.

Answer 1

Se desiderate semplicemente per mostrare tutto di come avete descritto si può fare con i CSS con un position:relative e align:bottom o position:absolute con bottom:?px tuttavia si sarebbe poi dovuto preoccuparsi di cose che vanno a lontano in su.

Answer 2

avrei potuto una soluzione rapida jQuery, la sua domanda è etichettato in questo modo, se avete bisogno di una soluzione CSS puro o ho preso il plugin sbagliato, siamo in grado di pensare a qualcos'altro ... Mai usato superfish me stesso, ma ho verificato l'esempio di "stile verticale" da questo sito: http://users.tpg.com.au/j_birch/plugins/superfish/

Quindi, quando passi il mouse sull'elemento 3 ti piacerebbe vedere il sub 3.1 al livello dell'articolo 1? Dopo aver dato un'occhiata rapida in codice di questo plugin credo è sufficiente modificare showSuperfishUl(), che ha una linea che finisce così:

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

Supponendo i tuoi articoli e riserve sono la stessa altezza, e la sostituzione del contesto con $ (questo), si potrebbe aggiungere qualcosa di simile a queste linee:

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"); 
} 

si avrebbe bisogno di impostare una pagina vera e propria per scoprire se funziona in un contesto reale ... "top" non sarà probabilmente funziona con questo relativo/float: layout a sinistra, ma nel tuo "livello concettuale" è quasi tutto.