का पता लगाने के तत्वों jQuery

Question

का उपयोग कर अतिप्रवाह

सीएसएस:

.blue 
    { 
    width:200px; 
    height:200px; 
    background-color:blue; 
    color:#000000; 
    overflow:auto; 
    } 

जावास्क्रिप्ट:

function addChar() { 
    $('.blue').append('some text '); 
} 

HTML:

<div id='blue1' class="blue"></div><br /> 
<a href='javascript:void(0)' onclick='addChar()'>Add</a> 

div id='blue1'overflow संपत्ति auto पर सेट है। जब ऐसा होता है तो मैं अतिप्रवाह का पता लगाना चाहता हूं।

Answer 1

$.fn.HasScrollBar = function() { 
    //note: clientHeight= height of holder 
    //scrollHeight= we have content till this height 
    var _elm = $(this)[0]; 
    var _hasScrollBar = false; 
    if ((_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)) { 
     _hasScrollBar = true; 
    } 
    return _hasScrollBar; 
} 

/// यह मेरा समाधान है

Answer 2

एकमात्र तरीका जिसे मैं सोच सकता हूं वह है नेस्टेड डीआईवी बनाना और बाहरी div ऊंचाई की तुलना आंतरिक कक्ष के साथ करना। जहाँ तक मुझे पता रूप में आप अपने addChar() समारोह में width/clientWidth और height/clientHeight तुलना करना होगा

var outer = $('.blue'), 
    inner = $('<div>').appendTo(outer); 

function addChar() { 
    inner.append('some text '); 
    if (inner.height() > outer.height()) { 
     console.log('overflowed'); 
    } 
} 

Answer 3

: आप मौजूदा मार्कअप को संशोधित करने के लिए नहीं करना चाहते, तो आप इस तरह jQuery का उपयोग कर इसे जोड़ सकते हैं। जब कि परिवर्तन आपको स्क्रॉलबार मिल गया है (जब तक आप आयाम कहीं और moddify ...)

कुछ इस तरह:

function addChar() { 
    var blueEl = $('.blue'); 
    blueEl.append ('some text '); 

    if (blueEl.width() !== blueEl[0].clientWidth || blueEl.height() !== blueEl[0].clientHeight) { 
     // element just got scrollbars 
    } 
} 

Answer 4

function addChar() { 
    $('.blue').append('some text '); 
    if ($('.blue').innerWidth() != 200) 
    { 
     alert("it happened"); 
    } 
} 

FYI करें आप # blue1 का उपयोग करना चाहिए तेजी से निष्पादन के लिए .blue नहीं (जब तक आप .blue आप निश्चित रूप से जोड़कर कर रहे हैं वर्ग के कई तत्व होते हैं)

Answer 5

$.fn.hasOverflow = function() { 
    var $this = $(this); 
    var $children = $this.find('*'); 
    var len = $children.length; 

    if (len) { 
     var maxWidth = 0; 
     var maxHeight = 0 
     $children.map(function(){ 
      maxWidth = Math.max(maxWidth, $(this).outerWidth(true)); 
      maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); 
     }); 

     return maxWidth > $this.width() || maxHeight > $this.height(); 
    } 

    return false; 
}; 

उदाहरण:

var $content = $('#content').children().wrapAll('<div>'); 
while($content.hasOverflow()){ 
    var size = parseFloat($content.css('font-size'), 10); 
    size -= 1; 
    $content.css('font-size', size + 'px'); 
} 

Answer 6

आप अपने clientWidth और/या clientHeight के खिलाफ तत्व के scrollWidth और/या scrollHeight गुण देख सकते हैं।

ध्यान दें कि यह वास्तव में jQuery की आवश्यकता नहीं है।

Answer 7

jQuery.fn.preventOverflow = function(){ 
    return this.each(function(){ 
     var defaultDisplay = $(this).css('display'); 
     var defaultHeight = $(this).height(); 

     $(this).css('display', 'table'); 
     var newHeight = $(this).height(); 
     $(this).css('display', defaultDisplay); 
     if(newHeight > defaultHeight){ 
      $(this).height(newHeight); 
     } 
    }); 
}; 

$('.query').preventOverflow(); 

यहां मैं केवल ऊंचाई को रोक रहा हूं, लेकिन मुझे लगता है कि इस विधि का उपयोग चौड़ाई के लिए भी किया जा सकता है।

Answer 8

विशिष्ट प्रश्न के

एक-लाइनर समाधान:

var elt, hasOverflow = (elt = $('#blue1')).innerWidth() > elt[0].scrollWidth; 

बस गोल्फ के लिए एक सा चाहता था। :]

(नोट:। यह क्षैतिज अतिप्रवाह का पता लगाने के लिए ही है, यह रूप में अच्छी तरह खड़ी अतिप्रवाह का पता लगाने को जोड़ने के लिए तुच्छ है)

Answer 9

मैं लूका का जवाब जब तक मुझे एहसास हुआ कि यह प्रत्येक बच्चे को व्यक्तिगत रूप से की तुलना था इस्तेमाल किया। यह काम नहीं करता है क्योंकि यह डीओएम नोड की सामग्री के आयामों की गणना नहीं करता है, केवल प्रत्येक बच्चे को अलग-अलग।मैं डोम की scrollHeight संपत्ति बजाय नोड का इस्तेमाल किया:

(function($) { 
    $.fn.hasOverflow = function() { 
    var $this = $(this); 
    return $this[0].scrollHeight > $this.outerHeight() || 
     $this[0].scrollWidth > $this.outerWidth(); 
    }; 
})(jQuery); 

संपादित करें:.height() का उपयोग कर जिसके खाते में गद्दी नहीं ले करता है की वजह से एक बग फिक्स्ड।

Answer 10

सोचा कि मुझे प्रवीण के उत्तर के आधार पर एक बेहतर समाधान जोड़ना चाहिए। यह सुधार चौड़ाई, ऊंचाई या दोनों की जांच करने की अनुमति देता है। इसलिए नाम $.hasOverflow तो लूका भी धन्यवाद। टर्नरी ऑपरेटर इसे थोड़ा अधिक अभिव्यक्तिपूर्ण और स्पष्ट बनाता है। https://github.com/ZetaSoftware/jquery-overflown-plugin:

/** 
* @param {Boolean} x overflow-x 
* @param {Boolean} y overflow-y 
*/ 
$.fn.hasOverflow = function (x, y) { 
    var el = $(this).get(0), 
     width = el.clientWidth < el.scrollWidth, 
     height = el.clientHeight < el.scrollHeight; 

    return !x 
     ? !y 
     ? width || height 
     : height 
     : width; 
} 

Answer 11

यहाँ जो उपयोगी हो सकता है यदि आप पता लगाने के लिए अगर एक तत्व या बहकर नहीं है चाहता हूँ एक प्लगइन मैं ने लिखा है, है।

इस प्लगइन के साथ, मूल उदाहरण में, आप बस कर सकते हैं: $("#blue1").overflown() # blue1 के बच्चों से पता लगाने के लिए बह रहे हैं।