Jquery - तत्वों को ओवरफ्लो द्वारा छुपाया गया है या नहीं: छुपाएं; कंटेनर?

Question

मुझे यह समस्या है और मैं समझने के एक वैचारिक स्तर पर हूं, हम कैसे पता लगा सकते हैं कि कोई दिया गया तत्व कंटेनर के बाहर है (ओवरफ़्लो वाला एक कंटेनर: छुपा; संपत्ति घोषित);

यहाँ हम क्या चाहते हैं के संदर्भ दिया गया है:

आइए छवि हम कर रहे हैं माउस मंडराना आइटम 3:

हम आम तौर पर है:

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

इस तरह, उप 3.2 बाहर हो जाएगा प्रवाह के प्रवाह और दिखाई नहीं दे रहे हैं, या (अगर हम ओवरफ्लो के बजाय कंटेनर पर स्पष्टफिक्स का उपयोग करते हैं), यह हल करने के लिए, यह अन्य पृष्ठ सामग्री पर छोड़ देगा), हमें लगता है कि यह एक बेहतर समाधान है, फिर से, हम मानते हैं कि हम माउस-होवर आइटम 3:

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

ऐसा करने के लिए, शायद, हमें पता होना चाहिए कि तत्व प्रवाह से बाहर है या नहीं, और यह वह है, सभी चीज़ों को एक्स पीएक्स को दबाएं;

यदि यह हल करने के लिए यह एक अच्छा अपमान है, तो हम कैसे पता लगा सकते हैं कि यह प्रवाह प्रवाह से बाहर है या नहीं?

यदि यह एक अच्छा दृष्टिकोण नहीं है, तो क्या आप कृपया एक और सुझाव दे सकते हैं?

ps- हम एक jquery मेनू समाधान के रूप में superfish का उपयोग कर रहे हैं।

Answer 1

आप बस सब कुछ प्रदर्शित करना चाहते हैं के रूप में आप का वर्णन किया है आपको लगता है कि एक position:relative और align:bottom या bottom:?px साथ position:absolute साथ सीएसएस के साथ आप तो अब तक अप करने के लिए जा चीजों के बारे में चिंता करने की ज़रूरत होगी लेकिन क्या कर सकते हैं।

Answer 2

मेरे पास एक त्वरित jQuery समाधान हो सकता है, तो आपका प्रश्न उस तरह से टैग किया गया है, अगर आपको शुद्ध सीएसएस समाधान की आवश्यकता है या मैंने गलत प्लगइन लिया है, तो हम कुछ और सोच सकते हैं ... कभी भी सुपरफिश का उपयोग नहीं किया लेकिन मैंने चेक आउट किया इस साइट से "वर्टिकल स्टाइल" उदाहरण: http://users.tpg.com.au/j_birch/plugins/superfish/

तो, जब आप आइटम 3 को माउसवर करते हैं तो आप आइटम 1 के स्तर पर उप 3.1 देखना चाहते हैं? इस प्लगइन के कोड में शीघ्रता से अवलोकन लेने के बाद मैं आप बस showSuperfishUl (संशोधित करने की जरूरत का मानना ​​है) एक लाइन है कि इस तरह से समाप्त होता है:

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

मान लिया जाये कि अपने आइटम और बाद के चरणों में एक ही ऊंचाई है, और संदर्भ की जगह $ (this) के साथ, आप इन पंक्तियों को कुछ इसी तरह जोड़ सकते हैं:

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

आप पता लगाने के लिए एक असली पृष्ठ सेटअप करने की आवश्यकता होगी, तो यह एक वास्तविक संदर्भ में काम करता है ... "टॉप" नहीं शायद होगा इस सापेक्ष/फ्लोट के साथ काम करें: बाएं लेआउट, लेकिन आपके "वैचारिक स्तर" में लगभग यह है।