Div पर अतिप्रवाह करने वाले तत्वों के साथ jquery की जाँच करें

Question

मैं एक निश्चित ऊंचाई के साथ एक div है और overflow:hidden;

मैं jQuery के साथ जांच करना चाहता हूं कि क्या div में तत्व हैं जो div की निश्चित ऊंचाई से अधिक बह रहे हैं। मैं यह कैसे कर सकता हूँ?

Comments

मैं गलत हो सकता है, लेकिन मुझे नहीं लगता कि एक तत्व किसी अन्य तत्व के बाहर है या नहीं, यह जांचने के लिए एक जादुई jQuery तरीका है। आपको संभवतः अपने div के अंदर तत्वों की ऊंचाई और स्थिति की जांच करनी होगी और यह देखने के लिए कि क्या वे ओवरफ्लो होते हैं, कुछ गणनाएं करेंगे।

— एडेनो

हां, मैं यह जांचने के लिए सोच रहा था कि क्या डिव के शीर्ष की स्थिति और डिव के अंदर अंतिम बाल तत्व के तल की स्थिति डिव की ऊंचाई से अधिक है

— जस्टिन मेल्टज़र

संभव तत्वों

— ओवर फ्लो

Answer 1

यदि वास्तव में कोई अतिप्रवाह हो रहा है या नहीं, यह जांचने के लिए आपको वास्तव में किसी भी jQuery की आवश्यकता नहीं है। का उपयोग करते हुए element.offsetHeight, element.offsetWidth, element.scrollHeightऔर element.scrollWidthआप निर्धारित कर सकते हैं यदि आपके तत्व यह आकार की तुलना में सामग्री बड़ा है:

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element have overflow
} else {
    // your element doesn't have overflow
}

कार्रवाई में उदाहरण देखें: फिडल

लेकिन अगर आप जानना चाहते हैं कि आपके तत्व के अंदर कौन सा तत्व दिखाई दे रहा है या नहीं, तो आपको अधिक गणना करने की आवश्यकता है। दृश्यता की दृष्टि से बाल तत्व के लिए तीन अवस्थाएँ हैं:

यदि आप अर्ध-दृश्य वस्तुओं को गिनना चाहते हैं तो यह वह स्क्रिप्ट होगी जिसकी आपको आवश्यकता है:

var invisibleItems = [];
for(var i=0; i<element.childElementCount; i++){
  if (element.children[i].offsetTop + element.children[i].offsetHeight >
      element.offsetTop + element.offsetHeight ||
      element.children[i].offsetLeft + element.children[i].offsetWidth >
      element.offsetLeft + element.offsetWidth ){

        invisibleItems.push(element.children[i]);
    }

}

और अगर आप अर्ध-दृश्य की गणना नहीं करना चाहते हैं तो आप थोड़े अंतर से गणना कर सकते हैं।

Comments

अगर मैं गलत हूं तो मुझे सुधारें, लेकिन यह अधिक क्रोम V.20.0.1132.57 पर काम नहीं करता है। यदि आप div के अंदर पाठ बदलते हैं, तो बैकग्राउंड का रंग पीला रहता है, jsbin.com/ujiwah/25/edit#javascript,html,live

— Robbie

@ रोबी <p>एक ब्लॉक स्तर का तत्व है और 100% चौड़ाई लेता है। यदि आप पी के अंदर पाठ की मात्रा के साथ यह कोशिश करना चाहते हैं तो बस बनायें p{display:inline}। इस तरह से पाठ अंदर की चौड़ाई निर्धारित करता है p।

— मोहसिन

मैंने पढ़ा "आपको वास्तव में किसी भी jQuery की आवश्यकता नहीं है" और तुरंत चला गया "duh, यह सरल गणित है।"

— माइकल जे। कैलकिंस

अधिकांश मामलों के लिए काम करता है लेकिन सीएसएस तालिकाओं (प्रदर्शन तालिका-सेल, टेबल-आरओओ, तालिका) के साथ परिदृश्य को कवर नहीं करेगा -

— दिमित्री

मैं समझता हूं कि ऑफसेटहाइट में बॉर्डर शामिल हैं, जो स्क्रॉल करने योग्य क्षेत्र की ओर नहीं आते हैं। सिर्फ एक नोट। (मुझे सही करें अगर मैं गलत हूँ)

— Lodewijk

Answer 2

मेरे पास ओपी के रूप में एक ही सवाल था, और उन जवाबों में से किसी ने मेरी जरूरतों को पूरा नहीं किया। मुझे एक साधारण शर्त की जरूरत थी, एक साधारण जरूरत के लिए।

यहाँ मेरा जवाब है:

if ($("#myoverflowingelement").prop('scrollWidth') > $("#myoverflowingelement").width() ) {
  alert("this element is overflowing !!");
}
else {
 alert("this element is not overflowing!!");
}

इसके अलावा, आप बदल सकते हैं scrollWidthद्वारा scrollHeightआप या तो मामले का परीक्षण करने की जरूरत है।

Comments

धन्यवाद, कि मेरे लिए काम किया। सिर्फ jquery में एक सरल उदाहरण की जरूरत है, लेकिन सादे js में नहीं।

— मिखाइल-टी

पैडिंग / मार्जिन वाले तत्वों के लिए काम नहीं करता है। चौड़ाई का बाहरी भाग (सच) का उपयोग करें

— व्लादिमीर श्मिट

में काम नहीं करता है, मोज़िला और क्रोम में ठीक काम करता है।

— सुशील कुमार

इस स्क्रिप्ट के साथ मेरे कुछ अजीब प्रभाव हैं। क्रोम में परीक्षण। मैं इसे ऊँचाई की जाँच करने के लिए (आउटरहाइट का उपयोग करके) फिर से लिखता हूँ और यदि मैं स्क्रिप्ट की जाँच करने के लिए किसी पृष्ठ को पुनः लोड करने के लिए F5 का उपयोग करता हूं, या किसी अन्य पृष्ठ से नेविगेट करता हूं, तो यह हमेशा अतिप्रवाह = सच के रूप में वापस आता है, लेकिन अगर मैं ctrl-F5 का उपयोग करता हूं तो यह आता है वापस अतिप्रवाह = असत्य के रूप में। यह तब होता है जब ऐसी स्थिति का परीक्षण किया जाता है जिसे गलत माना जाता है। जब यह सच माना जाता है तो यह हमेशा काम करता है।

— डेनिस

ठीक है, मैं इसे अपने आप को पता लगा। मेरे पास मेरे स्क्रिप्ट टैग window.addEventListener ('DOMContentLoaded') में लिपटे हुए हैं, इसलिए वे मेरे अतुल्यकालिक लोड किए गए jquery और अन्य फ़ाइलों के साथ काम करेंगे। लेकिन इस स्क्रिप्ट को उस स्तर पर चलाना स्पष्ट रूप से गलत रीडिंग देता है, इसलिए इस स्क्रिप्ट के लिए मैंने स्क्रिप्ट के निष्पादन में देरी करने के लिए DOMContentLoaded को केवल 'लोड' से बदल दिया। अब यह हर बार सही परिणाम देता है। और मेरे उद्देश्यों के लिए यह पूरी तरह से ठीक है कि यह पेज लोड होने के बाद तक इसे चलाने का इंतजार करता है, फिर मैं उपयोगकर्ताओं को "अधिक पढ़ें" बटन पर ध्यान केंद्रित करने के लिए एक एनीमेशन भी जोड़ सकता हूं।

— डेनिस

Answer 3

इसलिए मैंने ओवरफ्लोिंग जक्वरी लाइब्रेरी का इस्तेमाल किया: https://github.com/kevinmarx/overflowing

पुस्तकालय स्थापित करने के बाद, यदि आप overflowingसभी अतिप्रवाह तत्वों को वर्ग निर्दिष्ट करना चाहते हैं, तो आप बस चलाते हैं:

$('.targetElement').overflowing('.parentElement')

यह तब कक्षा देगा overflowing, जैसे <div class="targetElement overflowing">कि उन सभी तत्वों को जो अतिप्रवाह कर रहे हैं। आप इसे कुछ ईवेंट हैंडलर (क्लिक, माउसओवर) या अन्य फ़ंक्शन में जोड़ सकते हैं जो उपरोक्त कोड चलाएगा ताकि यह गतिशील रूप से अपडेट हो।

Answer 4

मोहसिन के उत्तर के आधार पर आंशिक रूप से (जोड़ी गई पहली शर्त उस मामले को शामिल करती है जहां बच्चे को माता-पिता से पहले छिपाया जाता है):

jQuery.fn.isChildOverflowing = function (child) {
  var p = jQuery(this).get(0);
  var el = jQuery(child).get(0);
  return (el.offsetTop < p.offsetTop || el.offsetLeft < p.offsetLeft) ||
    (el.offsetTop + el.offsetHeight > p.offsetTop + p.offsetHeight || el.offsetLeft + el.offsetWidth > p.offsetLeft + p.offsetWidth);
};

तो बस करो:

jQuery('#parent').isChildOverflowing('#child');

Answer 5

एक तरीका खुद के खिलाफ स्क्रॉलटॉप की जांच करना है। सामग्री को उसके आकार से बड़ा मान दें और फिर देखें कि उसका स्क्रॉलटॉप 0 है या नहीं (यदि यह 0 नहीं है, तो यह अतिप्रवाह है)।

http://jsfiddle.net/ukvBf/

Answer 6

सादे अंग्रेजी में: मूल तत्व प्राप्त करें। यह ऊँचाई की जाँच करें, और उस मान को बचाएं। फिर सभी बच्चे तत्वों के माध्यम से लूप करें और उनकी व्यक्तिगत ऊंचाइयों की जांच करें।

यह गंदा है, लेकिन आपको मूल विचार मिल सकता है: http://jsfiddle.net/VgDgz/

Comments

यह एक अच्छा उदाहरण है, लेकिन स्थिति के बारे में क्या। यदि कोई तत्व माता-पिता के शीर्ष पर सभी तरह से निरपेक्ष है, तो वह अतिप्रवाह कर सकता है, भले ही ऊंचाई कम हो, फिर भी अभिभावक।

— 23:23 पर एडीनो

बिल्कुल, वहाँ काफी कुछ अलग मामलों है कि यह कारण हो सकता है की संभावना है। जहां शुरू करने के लिए बस एक त्वरित उदाहरण है। सेशन के विशिष्ट मामले शायद क्या परिभाषित करेगा के लिए जांच की ज़रूरत है

— Doozer ब्लेक

Answer 7

यहाँ एक शुद्ध jQuery समाधान है, लेकिन यह बल्कि गड़बड़ है:

var div_height = $(this).height();
var vertical_div_top_position = $(this).offset().top;
var lastchild_height = $(this).children('p:last-child').height();
var vertical_lastchild_top_position = $(this).children('p:last-child').offset().top;
var vertical_lastchild_bottom_position = lastchild_height + vertical_lastchild_top_position;
var real_height = vertical_lastchild_bottom_position - vertical_div_top_position;

if (real_height > div_height){
    //overflow div
}

Answer 8

यह jQuery का समाधान है जो मेरे लिए काम करता है। offsetWidthआदि ने काम नहीं किया।

function is_overflowing(element, extra_width) {
    return element.position().left + element.width() + extra_width > element.parent().width();
}

यदि यह काम नहीं करता है, तो सुनिश्चित करें कि तत्वों के माता-पिता की वांछित चौड़ाई है (व्यक्तिगत रूप से, मुझे इसका उपयोग करना था parent().parent())। positionमाता-पिता के सापेक्ष। मैंने भी शामिल किया है extra_widthक्योंकि मेरे तत्वों ("टैग") में छवियां शामिल हैं, जो छोटे समय के लिए लेती हैं लोड, लेकिन फ़ंक्शन कॉल के दौरान उनके पास शून्य चौड़ाई है, गणना को खराब कर रहा है। उस चारों ओर जाने के लिए, मैं निम्नलिखित कॉलिंग कोड का उपयोग करता हूं:

var extra_width = 0;
$(".tag:visible").each(function() {
    if (!$(this).find("img:visible").width()) {
        // tag image might not be visible at this point,
        // so we add its future width to the overflow calculation
        // the goal is to hide tags that do not fit one line
        extra_width += 28;
    }
    if (is_overflowing($(this), extra_width)) {
        $(this).hide();
    }
});

उम्मीद है की यह मदद करेगा।

Answer 9

मैंने यह तय किया कि ओवरफ्लो में एक और div जोड़कर। फिर आप 2 डिवो की ऊंचाइयों की तुलना करते हैं।

<div class="AAAA overflow-hidden" style="height: 20px;" >
    <div class="BBBB" >
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

और जे.एस.

    if ($('.AAAA').height() < $('.BBBB').height()) {
        console.log('we have overflow')
    } else {
        console.log('NO overflow')
    }

यह आसान लग रहा है ...