DIV के आयाम को कैसे बदला जाए?

352

मैंने निम्नलिखित नमूना html किया है, एक DIV है जिसमें 100% चौड़ाई है। इसमें कुछ तत्व होते हैं। पुन: आकार देने वाली खिड़कियां करते समय, आंतरिक तत्वों को फिर से तैनात किया जा सकता है, और div का आयाम बदल सकता है। मैं पूछ रहा हूं कि क्या div के आयाम परिवर्तन की घटना को हुक करना संभव है? और कैसे करना है? मैं वर्तमान में लक्ष्य DIV पर jQuery आकार घटना के लिए कॉलबैक फ़ंक्शन को बांधता हूं, हालांकि, कोई कंसोल लॉग आउटपुट नहीं है, नीचे देखें:

आकार बदलने से पहले यहां छवि विवरण दर्ज करें

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>
javascript  jquery  html 
— विलियम चोई
स्रोत
7
यह काम नहीं करेगा क्योंकि, आप इवेंट को निर्दिष्ट div एलिमेंट के लिए आकार बदल रहे हैं। लेकिन आकार बदलने वाली घटना आपके तत्व के लिए नहीं विंडो के लिए ट्रिगर होगी।
— फतह एसीट
आप setIntervalयहां एक संभावित समाधान के रूप में उपयोग कर सकते हैं। clearIntervalआपके काम पूरा होते ही आप लूप को बंद करने के लिए हमेशा एक बटन पर क्लिक कर सकते हैं।
— पीटर डार्मिस
1
2020 के बाद से, ResizeObserver IE को छोड़कर सभी प्रमुख ब्राउज़रों (क्रोम, सफारी, फ़ायरफ़ॉक्स, एज) में काम करता है। caniuse.com/#feat=resizeobserver
— Dan

जवाबों:

265

यह निर्धारित करने के लिए एक बहुत ही कुशल विधि है कि क्या किसी तत्व का आकार बदल दिया गया है।

http://marcj.github.io/css-element-queries/

इस लाइब्रेरी में एक वर्ग है ResizeSensorजिसका उपयोग रिसाइज़ डिटेक्शन के लिए किया जा सकता है।
यह एक घटना-आधारित दृष्टिकोण का उपयोग करता है, इसलिए यह बहुत तेज़ है और सीपीयू समय बर्बाद नहीं करता है।

उदाहरण:

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

कृपया jQuery onresize प्लगइन का उपयोग न करें क्योंकि यह परिवर्तनों की जांच करने के लिए setTimeout()DOM clientHeight/ clientWidthproperties को एक लूप में पढ़ने के साथ संयोजन में उपयोग करता है ।
यह अविश्वसनीय धीमी और गलत है क्योंकि यह लेआउट थ्रशिंग का कारण बनता है ।

प्रकटीकरण: मैं इस पुस्तकालय से सीधे जुड़ा हुआ हूं।

— मार्क जे। श्मिट
स्रोत
8
@ जेक, IE11 समर्थन अब लागू किया गया है।
— मार्क जे। श्मिट
15
@ एलेटियोस को आपको करीब से देखना चाहिए। requestAnimationFrame धीमे आयाम का पता लगाने के लिए नहीं है, बल्कि इसके ठीक विपरीत है: यह उन सभी चरम घटनाओं को धीमा कर देता है जिन्हें वास्तविक घटना के आधार पर निकाल दिया जाता है, जो सीपीयू को बचाने के लिए सेंसर का आकार बदल देते हैं। Github.com/marcj/css-element-queries/blob/master/src/…
— मार्क जे। श्मिट
6
@ एलेटियो मुझे लगता है कि आप एक बिंदु को याद करते हैं: सेटटाइमआउट न केवल गलत है, बल्कि नरक के रूप में धीमा है। RequestAnimationFrame जो एक साधारण बूलियन के लिए जाँचता है, वह एक सेट टाइमआउट की तुलना में तेजी से डोम के गुणों के खिलाफ हर समय जाँचता है। इसके अलावा कि सेटटाइमआउट को हर कुछ मिलीसेकंड भी कहा जाता है।
— मार्क जे। श्मिट
9
@Orwellophile आपने स्पष्ट रूप से कुछ भी नहीं समझा है। उन उत्तरों को छोड़ना बंद कर दें, जहां आपको पता नहीं है कि यह आंतरिक रूप से कैसे काम करता है। फिर से: सीएसएस-एलिमेंट-क्वेरी: एक वास्तविक आकार बदलने वाली घटना का उपयोग करता है जो कि हर बार ट्रिगर होने के कारण आयाम बदलता है। चूँकि आपको बहुत सी घटनाएँ मिलेंगी (उदाहरण के लिए drag'n'drop के लिए) इसमें अनुरोध जोड़ा गया है। एक साधारण बूलियन वेरिएबल के लिए जाँच की जाँच करें जो उन ट्रिगर घटनाओं को 1 / फ्रेम से नीचे कर सकें। jquery प्लगइन: एक सेटटाइमआउट का उपयोग करता है जो हर समय DOM लेआउट प्रॉप्स (क्लायंटहाइट आदि) की जाँच करता है, जहाँ प्रत्येक जाँच बहुत धीमी होती है, लेकिन समान कार्यक्षमता होने के लिए अक्सर जाँच करने की आवश्यकता होती है।
— मार्क जे। श्मिट
9
@Aletheios, @Orwellophile, और जो कोई भी उनके द्वारा गुमराह किया गया हो सकता है: requestAnimationFrameबनाम setTimeoutअप्रासंगिक है, यह पुस्तकालय लूप नहीं करता है । requestAnimationFrameइसका उपयोग केवल आपके कॉलबैक को कॉल करने की आवृत्ति / थ्रॉटल आवृत्ति का उपयोग करने के लिए किया जाता है, यह पोल नहीं करता है । MutationObserver सैद्धांतिक रूप से इसी तरह के प्रभाव के लिए इस्तेमाल किया जा सकता है लेकिन इसके विपरीत पुराने ब्राउज़रों में नहीं। यह उत्कृष्ट रूप से चतुर है।
— हान सियोल-ओह
251

इसके लिए एक नया मानक क्रोम 64 में उपलब्ध आब्जर्वर ऑब्जर्वर एपी है।

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)
Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me</textarea><br>
स्निपेट का विस्तार करें

आब्जर्वर का आकार बदलें

कल्पना: https://wicg.github.io/ResizeObserver

पॉलीफिल्स: https://github.com/WICG/ResizeObserver/issues/3

फ़ायरफ़ॉक्स समस्या: https://bugzil.la/1272409

सफारी समस्या: http://wkb.ug/157743

वर्तमान समर्थन: http://caniuse.com/#feat=resizeobserver

— डैनियल हेर
स्रोत
3
अभी तक उत्पादन साइटों के लिए उपयोगी नहीं है, क्योंकि केवल क्रोम फिलहाल इसका समर्थन करता है। लेकिन निश्चित रूप से यहाँ सबसे अच्छा समाधान! btw, यहाँ कार्यान्वयन स्थिति का एक त्वरित अवलोकन है: chromestatus.com/feature/5705346022637568
— Philipp
8
@ झिलिप एक पॉलीफ़िल है।
— डैनियल हेर
2
ऐसा लगता है कि यह अभी भी सभी ब्राउज़रों में एक प्रायोगिक विशेषता है caniuse.com/#feat=resizeobserver
— फ्रांसेक
5
इस उत्तर के 2 साल बाद भी, ब्राउज़र का समर्थन धूमिल है: caniuse.com/#search=resizeobserver
— Scrimothy
2
नवीनतम क्रोम और एफएफ में एक आकर्षण की तरह काम करता है।
— क्लेमेन तुषार
32

आपको resizeईवेंट को बाइंड करना होगाwindow ऑब्जेक्ट , न कि जेनेरिक html एलिमेंट पर।

फिर आप इसका उपयोग कर सकते हैं:

$(window).resize(function() {
    ...
});

और कॉलबैक फ़ंक्शन के भीतर आप अपनी divकॉलिंग की नई चौड़ाई की जांच कर सकते हैं

$('.a-selector').width();

तो, आपके प्रश्न का उत्तर नहीं है , आप resizeईवेंट को एक div पर बाँध नहीं सकते ।

— एलेसेंड्रो वेंडरसकोलो
स्रोत
124
यह उत्तर पर्याप्त नहीं है। आकार परिवर्तन बिना किसी विंडो आकार के हो सकते हैं। बिल्कुल भी।
— vsync
9
उदाहरण के लिए जब आपके पास एक फाड़नेवाला तत्व है या किसी तत्व के लिए कुछ पाठ या अन्य सामग्री संलग्न करें।
— गुंटर ज़ोचबॉयर
@anu सच नहीं है, आपके पास javascript के जरिए DOM मॉडिफिकेशन हो सकता है जिससे CSS नई संरचना में लागू हो सके जिसके परिणामस्वरूप हर कंटेनर का आकार अलग-अलग हो।
— एंटोनियोसस
29

दीर्घकालिक, आप ResizeObserver का उपयोग करने में सक्षम होंगे ।

new ResizeObserver(callback).observe(element);

दुर्भाग्य से यह वर्तमान में कई ब्राउज़रों में डिफ़ॉल्ट रूप से समर्थित नहीं है।

मतलब समय में, आप निम्न की तरह फ़ंक्शन का उपयोग कर सकते हैं। चूंकि, अधिकांश तत्व आकार परिवर्तन विंडो से आकार बदलने या DOM में कुछ बदलने से आएंगे। आप विंडो के आकार बदलने की घटना के साथ विंडो को आकार देने के लिए सुन सकते हैं और आप MutationObserver का उपयोग करके DOM परिवर्तनों को सुन सकते हैं ।

यहाँ एक फ़ंक्शन का एक उदाहरण है जो आपको कॉल करेगा जब उपलब्ध तत्वों का आकार उन घटनाओं में से किसी एक के परिणामस्वरूप बदलता है:

var onResize = function(element, callback) {
  if (!onResize.watchedElementData) {
    // First time we are called, create a list of watched elements
    // and hook up the event listeners.
    onResize.watchedElementData = [];

    var checkForChanges = function() {
      onResize.watchedElementData.forEach(function(data) {
        if (data.element.offsetWidth !== data.offsetWidth ||
            data.element.offsetHeight !== data.offsetHeight) {
          data.offsetWidth = data.element.offsetWidth;
          data.offsetHeight = data.element.offsetHeight;
          data.callback();
        }
      });
    };

    // Listen to the window's size changes
    window.addEventListener('resize', checkForChanges);

    // Listen to changes on the elements in the page that affect layout 
    var observer = new MutationObserver(checkForChanges);
    observer.observe(document.body, { 
      attributes: true,
      childList: true,
      characterData: true,
      subtree: true 
    });
  }

  // Save the element we are watching
  onResize.watchedElementData.push({
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  });
};
— nkron
स्रोत
1
दुर्भाग्य से, ऐसा लगता है कि MutationObserver शैडो डोम में परिवर्तन का पता नहीं लगा सकता है।
— Ajedi32
@nkron, दुर्भाग्यवश, यदि आप CSS3 के आकार का उपयोग करते हैं, तो आकार बदलने का तब हो सकता है जब उपयोगकर्ता मैन्युअल रूप से आकार बदलता है। इस घटना को पकड़ा नहीं जा सकता।
— पचेरियर
@ Ajedi32 हाँ, लेकिन आप शैडॉम के अंदर MutationObserver का उपयोग कर सकते हैं। मेरा मतलब है, bodyइस उदाहरण में देखने के बजाय , आप सीधे एक तत्व देख सकते हैं। यह वास्तव में पूरे शरीर को देखने की तुलना में अधिक प्रदर्शन और कुशल है।
— trusktr
@ Ajedi32 खैर, एकमात्र समस्या यह है, अगर शैडो डोम ट्री बंद हो गया है, तो आप इंटर्नल तक नहीं पहुंच पाएंगे, लेकिन मुझे नहीं लगता कि आमतौर पर ऐसा कुछ है जो आपको करने की आवश्यकता है, और यदि आपको निरीक्षण करने की आवश्यकता है एक बंद पेड़ की तरह तब डिजाइन में समस्या हो सकती है। आदर्श रूप में, आपको केवल अपने स्वयं के तत्वों का निरीक्षण करना चाहिए, जिनकी आपके पास पहुंच है। एक शैडो-डीओएम घटक जिसकी आपको निरीक्षण करने की आवश्यकता है वह आंतरिक आकार का है जिसे ठीक से डिज़ाइन नहीं किया जा सकता है। क्या आपके पास एक विशिष्ट उदाहरण है? यदि हां, तो शायद मैं एक समाधान सुझाने में मदद कर सकता हूं (क्योंकि मुझे इसमें भी दिलचस्पी है, लेकिन अभी तक कोई उदाहरण नहीं है)।
— trusktr
@trusktr इस समय मेरे पास MCVE नहीं है, लेकिन मूल रूप से कोई भी शैडो DOM तत्व जो कुछ उपयोगकर्ता इनपुट के परिणामस्वरूप इसका आकार बदल सकता है, इस मुद्दे को ट्रिगर करने के लिए पर्याप्त होगा। एक बॉक्स जो क्लिक करने पर कुछ अतिरिक्त जानकारी के साथ फैलता है, उदाहरण के लिए। ध्यान दें कि मैं पृष्ठ का अवलोकन कर रहा हूं, व्यक्तिगत तत्व का नहीं, क्योंकि मैं पृष्ठ के आकार में वृद्धि, कारण की परवाह किए बिना स्वचालित रूप से नीचे स्क्रॉल करना चाहता हूं। एक शैडो DOM तत्व का विस्तार सिर्फ कई संभावित कारणों में से एक है, जिसके कारण पृष्ठ लंबा हो सकता है।
— Ajedi32
24

ResizeSensor.js एक विशाल पुस्तकालय का हिस्सा है, लेकिन मैं करने के लिए अपनी कार्यक्षमता कम इस :

function ResizeSensor(element, callback)
{
    let zIndex = parseInt(getComputedStyle(element));
    if(isNaN(zIndex)) { zIndex = 0; };
    zIndex--;

    let expand = document.createElement('div');
    expand.style.position = "absolute";
    expand.style.left = "0px";
    expand.style.top = "0px";
    expand.style.right = "0px";
    expand.style.bottom = "0px";
    expand.style.overflow = "hidden";
    expand.style.zIndex = zIndex;
    expand.style.visibility = "hidden";

    let expandChild = document.createElement('div');
    expandChild.style.position = "absolute";
    expandChild.style.left = "0px";
    expandChild.style.top = "0px";
    expandChild.style.width = "10000000px";
    expandChild.style.height = "10000000px";
    expand.appendChild(expandChild);

    let shrink = document.createElement('div');
    shrink.style.position = "absolute";
    shrink.style.left = "0px";
    shrink.style.top = "0px";
    shrink.style.right = "0px";
    shrink.style.bottom = "0px";
    shrink.style.overflow = "hidden";
    shrink.style.zIndex = zIndex;
    shrink.style.visibility = "hidden";

    let shrinkChild = document.createElement('div');
    shrinkChild.style.position = "absolute";
    shrinkChild.style.left = "0px";
    shrinkChild.style.top = "0px";
    shrinkChild.style.width = "200%";
    shrinkChild.style.height = "200%";
    shrink.appendChild(shrinkChild);

    element.appendChild(expand);
    element.appendChild(shrink);

    function setScroll()
    {
        expand.scrollLeft = 10000000;
        expand.scrollTop = 10000000;

        shrink.scrollLeft = 10000000;
        shrink.scrollTop = 10000000;
    };
    setScroll();

    let size = element.getBoundingClientRect();

    let currentWidth = size.width;
    let currentHeight = size.height;

    let onScroll = function()
    {
        let size = element.getBoundingClientRect();

        let newWidth = size.width;
        let newHeight = size.height;

        if(newWidth != currentWidth || newHeight != currentHeight)
        {
            currentWidth = newWidth;
            currentHeight = newHeight;

            callback();
        }

        setScroll();
    };

    expand.addEventListener('scroll', onScroll);
    shrink.addEventListener('scroll', onScroll);
};

इसका इस्तेमाल कैसे करें:

let container = document.querySelector(".container");
new ResizeSensor(container, function()
{
    console.log("dimension changed:", container.clientWidth, container.clientHeight);
});
— मार्टिन वोंटके
स्रोत
यह चार्ट्स js करते हैं।
— एंटोनियोसस
इसे संपीड़ित करने के लिए धन्यवाद। मैं इसे आज़माने जा रहा हूँ :)
— टोनी के।
इस अभिव्यक्ति में कुछ parseInt( getComputedStyle(element) )
— गड़बड़ है
2
मैं भ्रमित हूँ कि "zIndex = parseInt (getComputedStyle (तत्व)) कैसे है?" वैध? मेरा मानना ​​है कि आप का अर्थ है: "zIndex = parseInt (getComputedStyle (तत्व) .zIndex)
— रयान बडौर
1
ऊपर दिए गए समाधान / कोड सभी आकार परिवर्तन घटनाओं का पता नहीं लगाते हैं (उदाहरण के लिए यदि कंटेनर को एक निश्चित आकार में बदल दिया जाता है तो यह बच्चे की घटनाओं के लिए आकार का पता नहीं लगाता है। jsfiddle.net/8md2rfsy/1 देखें )। स्वीकृत उत्तर काम करता है (संबंधित लाइनों को अनसुना करें)।
— newBee
21

मैं setTimeout()हैक की सिफारिश नहीं करता क्योंकि यह प्रदर्शन धीमा कर देता है! इसके बजाय, आप Div आकार परिवर्तन को सुनने के लिए DOM म्यूटेशन ऑब्जर्वर का उपयोग कर सकते हैं।

जे एस:

var observer = new MutationObserver(function(mutations) {
    console.log('size changed!');
  });
  var target = document.querySelector('.mydiv');
  observer.observe(target, {
    attributes: true
  });

HTML:

<div class='mydiv'>
</div>

यहाँ फिडेल
को div आकार बदलने की कोशिश करें।

आप debounceदक्षता में सुधार करने के लिए विधि में अपनी विधि को और भी लपेट सकते हैं । debounceDIV का आकार बदला जा रहा है, प्रत्येक मिलीसेकंड को ट्रिगर करने के बजाय हर x मिलीसेकंड अपनी विधि को ट्रिगर करेगा।

— JerryGoyal
स्रोत
9
इसके साथ एक ही समस्या यह है कि यह परिवर्तन की रिपोर्ट नहीं करता है जब तक कि उत्परिवर्तन वास्तव में तत्व के लिए नहीं होता है। यदि अन्य तत्वों को जोड़े जाने के कारण तत्व आकार बदलता है, तो यह काम नहीं करेगा।
— टोनी के।
मैं @TonyK से सहमत हूं। यह MutationObserver के साथ मेरी एकमात्र समस्या है और अब मैं लाइब्रेरी का आकार बदलने वाले तत्व की तलाश कर रहा हूं
— Murhaf Sousli
@JerryGoyal यह तब काम नहीं कर रहा है जब div में <img> टैग हो। पहली बार में छवि लोड नहीं हुई है और div आकार 0 के रूप में सेट किया गया है और लोड करने के बाद div आकार बदल गया है, लेकिन पर्यवेक्षक को ट्रिगर नहीं किया जाता है
— Santhosh
15

सबसे अच्छा समाधान तथाकथित तत्व क्वेरी का उपयोग करना होगा । हालांकि, वे मानक नहीं हैं, कोई विनिर्देश मौजूद नहीं है - और एकमात्र विकल्प उपलब्ध पॉलिफिल्स / पुस्तकालयों में से एक का उपयोग करना है, यदि आप इस तरह से जाना चाहते हैं।

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

कुछ पॉलीफ़िल / लाइब्रेरी हैं जो समस्या को विभिन्न तरीकों से हल करते हैं (हालांकि समाधान के बजाय वर्कअराउंड कहा जा सकता है):

मैंने प्रस्तावित समान समस्याओं के अन्य समाधान देखे हैं। आमतौर पर वे हुड के नीचे टाइमर या विंडो / व्यूपोर्ट आकार का उपयोग करते हैं, जो वास्तविक समाधान नहीं है। इसके अलावा, मुझे लगता है कि आदर्श रूप से इसे सीएसएस में मुख्य रूप से हल किया जाना चाहिए, और जावास्क्रिप्ट या html में नहीं।

— स्टेन
स्रोत
तत्व प्रश्नों के लिए +1 लेकिन मैं उन्हें जल्द ही कभी भी देखने के बारे में आशान्वित नहीं हूं। इस बिंदु पर AFAIK का मसौदा प्रारूप भी नहीं है ... शायद हममें से किसी एक इच्छुक पक्ष को एक साथ रखना चाहिए और उसे प्रस्तुत करना चाहिए?
— रोब इवांस
1
यह निश्चित रूप से एक अच्छा विचार है। अंतिम संस्करण तक पहुंचने में लंबा समय लगेगा, बहुत अधिक ध्यान आकर्षित करने की आवश्यकता है। इसे अच्छे तरीके से डिजाइन करना मुझे मामूली नहीं लगता। क्रॉस-ब्राउज़र संगतता, परिपत्र निर्भरता, डिबगिंग, पठनीयता और रखरखाव इत्यादि। तो चलिए जल्द से जल्द शुरू करते हैं :)
— स्टेन
@Stan, मुझे लगता है कि एलिमेंट क्वेरी क्या है, इस बारे में अधिक विस्तार जोड़कर यह उत्तर बेहतर हो सकता है।
— पचेरियर
15

मुझे यह पुस्तकालय काम करने के लिए मिला जब मार्कजे का समाधान नहीं था:

https://github.com/sdecima/javascript-detect-element-resize

यह बहुत हल्का है और सीएसएस या बस HTML लोडिंग / रेंडरिंग के माध्यम से भी प्राकृतिक आकार का पता लगाता है।

कोड नमूना (लिंक से लिया गया):

<script type="text/javascript" src="detect-element-resize.js"></script>
<script type="text/javascript">
  var resizeElement = document.getElementById('resizeElement'),
      resizeCallback = function() {
          /* do something */
      };
  addResizeListener(resizeElement, resizeCallback);
  removeResizeListener(resizeElement, resizeCallback);
</script>
— joshcomley
स्रोत
यह बात है। 147 लाइनों, स्क्रॉल घटनाओं का उपयोग करता है। इस कोड के माध्यम से पढ़ें यदि आप पूर्ण और सच्चे उत्तर चाहते हैं कि डिव आयाम परिवर्तनों का सबसे अच्छा पता कैसे लगाया जाए। संकेत: यह "बस इस पुस्तकालय का उपयोग नहीं है।"
— सिपाही रीड
1
इस लाइब्रेरी को आज़माने से पहले लोगों को इस मुद्दे पर एक नज़र डालनी चाहिए ।
— लुइस
13

इस http://benalman.com/code/projects/jquery-resize/examples/reset/ पर एक नज़र डालें

इसके विभिन्न उदाहरण हैं। अपनी विंडो को आकार देने का प्रयास करें और देखें कि कंटेनर तत्वों के अंदर के तत्वों को कैसे समायोजित किया गया है।

उदाहरण के लिए js fiddle के साथ यह समझाने के लिए कि यह कैसे काम करता है।
इस फिडेल पर एक नजर डालें http://jsfiddle.net/sgsqJ/4/

उस आकार में () घटना क्लास "टेस्ट" वाले तत्वों से जुड़ी होती है और विंडो ऑब्जेक्ट के लिए भी होती है और विंडो ऑब्जेक्ट $ ('टेस्ट') के आकार में कॉलबैक होती है। रिसाइज () कहा जाता है।

जैसे

$('#test_div').bind('resize', function(){
            console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});
— भरत पाटिल
स्रोत
दिलचस्प। वह jsfiddle लगातार निरीक्षक के साथ क्रोम क्रैश करता है और मैं "अधिक पाठ जोड़ें" लिंक पर क्लिक करता हूं। फ़ायरफ़ॉक्स "बहुत अधिक पुनरावृत्ति" त्रुटियों को फेंकता है।
— एरिकपी
3
कृपया jQuery के आकार बदलें प्लगइन का उपयोग न करें। यह वास्तव में धीमा है और साथ ही सटीक नहीं है। बेहतर समाधान पाने के लिए मेरा जवाब देखें।
— मार्क जे। श्मिट
24
यह सीधे आयाम परिवर्तनों का पता नहीं लगाता है। यह एक आकार बदलने वाले इवेंट श्रोता का सिर्फ एक उप-उत्पाद है। एक आयाम परिवर्तन कई अन्य तरीकों से हो सकता है।
— vsync
4
क्या होगा अगर डिव का आकार शैली या डोम में परिवर्तन से है और खिड़की के आकार से नहीं?
— खौफ
9

आप उपयोग कर सकते हैं iframeया objectका उपयोग कर contentWindowया contentDocumentआकार बदलने पर। बिना setIntervalयाsetTimeout

कदम:

  1. करने के लिए अपने तत्व स्थिति सेट करें relative
  2. एक पारदर्शी निरपेक्ष IFRAME के ​​अंदर जोड़ें
  3. सुनो IFRAME.contentWindow- onresizeघटना

HTML का एक उदाहरण:

<div style="height:50px;background-color:red;position:relative;border:1px solid red">
<iframe style=width:100%;height:100%;position:absolute;border:none;background-color:transparent allowtransparency=true>
</iframe>
This is my div
</div>

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

$('div').width(100).height(100);
$('div').animate({width:200},2000);

$('object').attr({
    type : 'text/html'
})
$('object').on('resize,onresize,load,onload',function(){
    console.log('ooooooooonload')
})

$($('iframe')[0].contentWindow).on('resize',function(){
    console.log('div changed')
})

चल रहा उदाहरण

JsFiddle: https://jsfiddle.net/qq8p470d/

और देखें:

— अमिनाड ग्लिक्सेटिन
स्रोत
1
जोक्वेरी का उपयोग नहीं करने वालों के लिए एक नोट IFRAME.contentWindowतब तक उपलब्ध नहीं है, जब तक कि onloadघटना इफ्रेम पर न हो। इसके अलावा, आप स्टाइल जोड़ना चाह सकते हैं visibility:hidden;, क्योंकि iframe इसके पीछे के तत्वों के लिए माउस इनपुट को ब्लॉक कर सकता है (IE में कम से कम "फ्लोटिंग" लगता है)।
— जेम्स विल्किंस
3
हालांकि यह काम करता है, यह केवल आकार परिवर्तन का निरीक्षण करने के लिए एक नया ब्राउज़िंग संदर्भ बनाने के ओवरहेड के साथ एक भारी वजन वाला समाधान है। साथ ही, कुछ मामलों में यह displayतत्व की संपत्ति को बदलने के लिए आदर्श या संभव नहीं है।
— trusktr
सहमत, यह एक भयानक समाधान है जैसा कि ऊपर कहा गया है
— 29
इतना भयानक समाधान कैसे लिखा?
— अमिनावड ग्लैक्सेटिन
यह विधि वीडियो खिलाड़ियों और ऑडियो खिलाड़ियों के साथ अच्छी तरह से काम करती है जिन्हें गतिशील सामग्री के आकार की आवश्यकता होती है। Im इस विधि का उपयोग करके waveurfer.js आउटपुट का आकार बदल सकते हैं।
— डेविड क्लीज
8

केवल विंडो ऑब्जेक्ट "आकार" घटना उत्पन्न करता है। एकमात्र तरीका मुझे पता है कि आप जो करना चाहते हैं वह अंतराल टाइमर चलाना है जो समय-समय पर आकार की जांच करता है।

— नुकीले
स्रोत
7 

var div = document.getElementById('div');
div.addEventListener('resize', (event) => console.log(event.detail));

function checkResize (mutations) {
    var el = mutations[0].target;
    var w = el.clientWidth;
    var h = el.clientHeight;
    
    var isChange = mutations
      .map((m) => m.oldValue + '')
      .some((prev) => prev.indexOf('width: ' + w + 'px') == -1 || prev.indexOf('height: ' + h + 'px') == -1);

    if (!isChange)
      return;

    var event = new CustomEvent('resize', {detail: {width: w, height: h}});
    el.dispatchEvent(event);
}

var observer = new MutationObserver(checkResize); 
observer.observe(div, {attributes: true, attributeOldValue: true, attributeFilter: ['style']});
#div {width: 100px; border: 1px solid #bbb; resize: both; overflow: hidden;}
<div id = "div">DIV</div>
स्निपेट का विस्तार करें

— एकोन मोगवे
स्रोत
7

आश्चर्यजनक रूप से यह मुद्दा जितना पुराना है, यह अभी भी अधिकांश ब्राउज़रों में एक समस्या है।

जैसा कि अन्य लोगों ने कहा है कि, क्रोम 64+ में अब आकार बदलने के साथ जहाज मूल रूप से अवलोकन करते हैं, हालांकि, अभी भी कल्पना ठीक है और क्रोम अब विनिर्देश के नवीनतम संस्करण के पीछे (2019-01-29 के अनुसार) है ।

मैंने जंगल में अच्छे रिसाइज़र ऑबजर्वर पॉलीफिल्स के एक जोड़े को देखा है, हालांकि, कुछ विनिर्देश का पालन नहीं करते हैं जो कुछ और गणना के मुद्दों को बारीकी से देखते हैं।

मुझे कुछ उत्तरदायी वेब घटक बनाने के लिए इस व्यवहार की सख्त जरूरत थी जो किसी भी अनुप्रयोग में उपयोग किए जा सकते हैं। उन्हें अच्छी तरह से काम करने के लिए उन्हें हर समय उनके आयामों को जानने की आवश्यकता होती है, इसलिए ResizeObservers ने आदर्श लग रहा था और मैंने एक पॉलीफ़िल बनाने का फैसला किया, जो कल्पना का यथासंभव बारीकी से पालन करता था।

रेपो: https://github.com/juggle/resize-observer

डेमो: https://codesandbox.io/s/myqzvpmmy9

— Trem
स्रोत
यह निश्चित रूप से IE11 + ब्राउज़र संगतता के साथ काम करने वाले किसी भी व्यक्ति के लिए बगल का उत्तर है।
— ekfuhrmann
3

Clay.js ( https://github.com/zzarcon/clay ) का उपयोग करना तत्व आकार में परिवर्तन का पता लगाने के लिए काफी सरल है:

var el = new Clay('.element');

el.on('resize', function(size) {
    console.log(size.height, size.width);
});
— Zzarcon
स्रोत
7
कृपया उचित प्रकटीकरण प्रदान करें कि यह आपकी लाइब्रेरी है।
— झारपट GOFUNDME RELICENSING
यह मेरे लिए काम करता है, जहां ResizeSensor नहीं है, यह मेरी आधुनिक शैली को तोड़ता है। धन्यवाद Zzarcon :)
— Máxima
3

इस ब्लॉग पोस्ट ने मुझे DOM तत्वों में आकार परिवर्तन का कुशलता से पता लगाने में मदद की।

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

इस कोड का उपयोग कैसे करें ...

AppConfig.addResizeListener(document.getElementById('id'), function () {
  //Your code to execute on resize.
});

उदाहरण के लिए उपयोग किए गए पैक कोड ...

var AppConfig = AppConfig || {};
AppConfig.ResizeListener = (function () {
    var attachEvent = document.attachEvent;
    var isIE = navigator.userAgent.match(/Trident/);
    var requestFrame = (function () {
        var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
            function (fn) { return window.setTimeout(fn, 20); };
        return function (fn) { return raf(fn); };
    })();

    var cancelFrame = (function () {
        var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
               window.clearTimeout;
        return function (id) { return cancel(id); };
    })();

    function resizeListener(e) {
        var win = e.target || e.srcElement;
        if (win.__resizeRAF__) cancelFrame(win.__resizeRAF__);
        win.__resizeRAF__ = requestFrame(function () {
            var trigger = win.__resizeTrigger__;
            trigger.__resizeListeners__.forEach(function (fn) {
                fn.call(trigger, e);
            });
        });
    }

    function objectLoad(e) {
        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
        this.contentDocument.defaultView.addEventListener('resize', resizeListener);
    }

    AppConfig.addResizeListener = function (element, fn) {
        if (!element.__resizeListeners__) {
            element.__resizeListeners__ = [];
            if (attachEvent) {
                element.__resizeTrigger__ = element;
                element.attachEvent('onresize', resizeListener);
            } else {
                if (getComputedStyle(element).position === 'static') element.style.position = 'relative';
                var obj = element.__resizeTrigger__ = document.createElement('object');
                obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
                obj.__resizeElement__ = element;
                obj.onload = objectLoad;
                obj.type = 'text/html';
                if (isIE) element.appendChild(obj);
                obj.data = 'about:blank';
                if (!isIE) element.appendChild(obj);
            }
        }
        element.__resizeListeners__.push(fn);
    };

    AppConfig.removeResizeListener = function (element, fn) {
        element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
        if (!element.__resizeListeners__.length) {
            if (attachEvent) element.detachEvent('onresize', resizeListener);
            else {
                element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeListener);
                element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
            }
        }
    }
})();

नोट: AppConfig एक नाम स्थान / वस्तु है जिसका उपयोग मैं पुन: प्रयोज्य कार्यों के आयोजन के लिए करता हूं। बेझिझक खोज करें और उस नाम को बदलें जिसे आप चाहते हैं।

— बेन ग्रिपका
स्रोत
3

मेरा jQuery प्लगइन सभी तत्वों पर "आकार" घटना को सक्षम करता है न कि केवल बाहर window।

https://github.com/dustinpoissant/ResizeTriggering

$("#myElement") .resizeTriggering().on("resize", function(e){
  // Code to handle resize
});
— डस्टिन पॉसेंट
स्रोत
1
आपका लिंक उस स्थान की ओर इशारा कर रहा था जो अब मौजूद नहीं है। मैंने प्लगइन के नाम की खोज की है और एक पृष्ठ पाया है जो आपके विवरण से मेल खाता है। चूँकि आप प्लगइन के लेखक प्रतीत होते हैं, इसलिए मैंने आपके उत्तर की भाषा को यह स्पष्ट करने के लिए भी संपादित किया है कि यह आपका काम है। इस साइट के नियम ऐसे हैं कि जब आप उत्तर लिखते हैं तो आपके द्वारा विकसित कुछ का उपयोग करने की सलाह देते हैं जिससे आपको संबंध स्पष्ट करना चाहिए ।
— लुईस
यह महान समाधान नहीं है क्योंकि आप बार-बार सेटटीमर में कुछ फ़ंक्शन चलाते हैं जिसका अर्थ है कि ब्राउज़र लगातार सीपीयू को जला रहा है, भले ही कुछ भी नहीं हो रहा हो। लैपटॉप और सेल फोन के मालिक समाधान से लाभान्वित होते हैं जो ब्राउज़र की घटनाओं का उपयोग केवल तब करते हैं जब कुछ कार्रवाई होती है, जैसे ऑनस्क्राॅल घटना का उपयोग करना।
— रोमन ज़ेनका
2

आप निम्नलिखित स्निपेट में कोड की कोशिश कर सकते हैं, यह सादे जावास्क्रिप्ट का उपयोग करके आपकी आवश्यकताओं को कवर करता है। ( कोड स्निपेट चलाएं और चेतावनी को ट्रिगर करने के लिए पूर्ण पृष्ठ लिंक पर क्लिक करें कि यदि आप इसका परीक्षण करना चाहते हैं तो div का आकार परिवर्तन हो गया है। )

इस तथ्य के आधार पर कि यह एक है setInterval 100 मिलीसेकंड का है, मैं यह कहने की हिम्मत करूंगा कि मेरे पीसी को सीपीयू की बहुत भूख नहीं थी। (क्रोम का 0.1% का उपयोग परीक्षण के समय क्रोम में सभी खुले हुए टैब के लिए कुल के रूप में किया गया था।) लेकिन फिर यह सिर्फ एक div के लिए है, यदि आप बड़ी मात्रा में तत्वों के लिए ऐसा करना चाहते हैं, तो हाँ यह बहुत CPU भूखा हो सकता है।

आप वैसे भी सूँघने -आकार बदलने को रोकने के लिए हमेशा एक क्लिक ईवेंट का उपयोग कर सकते हैं ।

var width = 0; 
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized div');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
</div>
स्निपेट का विस्तार करें

आप फिडल को भी चेक कर सकते हैं

अपडेट करें

var width = 0; 
function myInterval() {
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);
return interval;
}
var interval = myInterval();
document.getElementById("clickMe").addEventListener( "click" , function() {
if(typeof interval!=="undefined") {
clearInterval(interval);
alert("stopped div-resize sniffing");
}
});
document.getElementById("clickMeToo").addEventListener( "click" , function() {
myInterval();
alert("started div-resize sniffing");
});
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" id="clickMe" />
        <input type="button" value="button 2" id="clickMeToo" />
        <input type="button" value="button 3" />
</div>
स्निपेट का विस्तार करें

अपडेटेड फ़िडल

— पीटर डर्मिस
स्रोत
2

यह शीर्ष उत्तर की एक बहुत सटीक प्रतिलिपि है, लेकिन एक लिंक के बजाय, यह कोड का केवल एक हिस्सा है जो मायने रखता है, जिसका अनुवाद आईएमओ अधिक पठनीय और समझने में आसान है। कुछ अन्य छोटे बदलावों में क्लोनकोड () का उपयोग करना, और html को js स्ट्रिंग में शामिल नहीं करना शामिल है। छोटे सामान, लेकिन आप इस तरह से कॉपी और पेस्ट कर सकते हैं और यह काम करेगा।

जिस तरह से यह काम करता है वह दो अदृश्य विभाजनों को भरता है जिसे आप देख रहे तत्व को भरते हैं, और फिर प्रत्येक में एक ट्रिगर डालते हैं, और एक स्क्रॉल स्थिति सेट करते हैं जो आकार में परिवर्तन होने पर स्क्रॉल परिवर्तन को ट्रिगर करने का नेतृत्व करेगा।

सभी वास्तविक श्रेय मार्क जे को जाता है, लेकिन यदि आप संबंधित कोड की तलाश कर रहे हैं, तो यह है:

    window.El = {}

    El.resizeSensorNode = undefined;
    El.initResizeNode = function() {
        var fillParent = "display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;";
        var triggerStyle = "position: absolute; left: 0; top: 0; transition: 0s;";

        var resizeSensor = El.resizeSensorNode = document.createElement("resizeSensor");
        resizeSensor.style = fillParent;

        var expandSensor = document.createElement("div");
        expandSensor.style = fillParent;
        resizeSensor.appendChild(expandSensor);

        var trigger = document.createElement("div");
        trigger.style = triggerStyle;
        expandSensor.appendChild(trigger);

        var shrinkSensor = expandSensor.cloneNode(true);
        shrinkSensor.firstChild.style = triggerStyle + " width: 200%; height: 200%";
        resizeSensor.appendChild(shrinkSensor);
    }


    El.onSizeChange = function(domNode, fn) {
        if (!domNode) return;
        if (domNode.resizeListeners) {
            domNode.resizeListeners.push(fn);
            return;
        }

        domNode.resizeListeners = [];
        domNode.resizeListeners.push(fn);

        if(El.resizeSensorNode == undefined)
            El.initResizeNode();

        domNode.resizeSensor = El.resizeSensorNode.cloneNode(true);
        domNode.appendChild(domNode.resizeSensor);

        var expand = domNode.resizeSensor.firstChild;
        var expandTrigger = expand.firstChild;
        var shrink = domNode.resizeSensor.childNodes[1];

        var reset = function() {
            expandTrigger.style.width = '100000px';
            expandTrigger.style.height = '100000px';

            expand.scrollLeft = 100000;
            expand.scrollTop = 100000;

            shrink.scrollLeft = 100000;
            shrink.scrollTop = 100000;
        };

        reset();

        var hasChanged, frameRequest, newWidth, newHeight;
        var lastWidth = domNode.offsetWidth;
        var lastHeight = domNode.offsetHeight;


        var onResized = function() {
            frameRequest = undefined;

            if (!hasChanged) return;

            lastWidth = newWidth;
            lastHeight = newHeight;

            var listeners = domNode.resizeListeners;
            for(var i = 0; listeners && i < listeners.length; i++) 
                listeners[i]();
        };

        var onScroll = function() {
            newWidth = domNode.offsetWidth;
            newHeight = domNode.offsetHeight;
            hasChanged = newWidth != lastWidth || newHeight != lastHeight;

            if (hasChanged && !frameRequest) {
                frameRequest = requestAnimationFrame(onResized);
            }

            reset();
        };


        expand.addEventListener("scroll", onScroll);
        shrink.addEventListener("scroll", onScroll);
    }
— सिपाही रीड
स्रोत
1

शुद्ध जावास्क्रिप्ट समाधान, लेकिन केवल तभी काम करता है जब तत्व का आकार सीएसएस के आकार के साथ होता है :

  1. ऑफसेटवेट और ऑफसेटहाइट के साथ तत्व का आकार ;
  2. इस तत्व पर एक ऑनक्लिक ईवेंट श्रोता जोड़ें ;
  3. जब ट्रिगर किया जाता है, तो क्यूरेंट की तुलना करें offsetWidthऔर offsetHeightसंग्रहीत मूल्यों के साथ, और यदि अलग है, तो वही करें जो आप चाहते हैं और इन मूल्यों को अपडेट करें।
— roipoussiere
स्रोत
1

यहां @nkron द्वारा समाधान का एक सरलीकृत संस्करण है, जो एकल तत्व (@ nkron के उत्तर में तत्वों की एक सरणी के बजाय, जटिलता की आवश्यकता नहीं है) पर लागू होता है।

function onResizeElem(element, callback) {    
  // Save the element we are watching
  onResizeElem.watchedElementData = {
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  };

  onResizeElem.checkForChanges = function() {
    const data = onResizeElem.watchedElementData;
    if (data.element.offsetWidth !== data.offsetWidth || data.element.offsetHeight !== data.offsetHeight) {
      data.offsetWidth = data.element.offsetWidth;
      data.offsetHeight = data.element.offsetHeight;
      data.callback();
    }
  };

  // Listen to the window resize event
  window.addEventListener('resize', onResizeElem.checkForChanges);

  // Listen to the element being checked for width and height changes
  onResizeElem.observer = new MutationObserver(onResizeElem.checkForChanges);
  onResizeElem.observer.observe(document.body, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  });
}

ईवेंट श्रोता और पर्यवेक्षक द्वारा हटाया जा सकता है:

window.removeEventListener('resize', onResizeElem.checkForChanges);
onResizeElem.observer.disconnect();
— GMAN
स्रोत
0 
jQuery(document).ready( function($) {

function resizeMapDIVs() {

// check the parent value...

var size = $('#map').parent().width();



if( $size < 640 ) {

//  ...and decrease...

} else {

//  ..or increase  as necessary

}

}

resizeMapDIVs();

$(window).resize(resizeMapDIVs);

});
— फैबियो ज़ंजीरोलीमी
स्रोत
0

भरत पाटिल उत्तर का उपयोग करते हुए, अधिकतम स्टैक त्रुटि को रोकने के लिए अपने बाइंड कॉलबैक के अंदर सीधे झूठे विवरण देखें।

$('#test_div').bind('resize', function(){
   console.log('resized');
   return false;
});
— सफेद खरगोश
स्रोत
0

यह एक बहुत पुराना सवाल है, लेकिन मुझे लगा कि मैं इस पर अपना समाधान लिखूंगा।

मुझे ResizeSensorलगता है कि हर किसी को उस पर एक बहुत बड़ा क्रश लग रहा था का उपयोग करने की कोशिश की । हालांकि लागू करने के बाद, मुझे एहसास हुआ कि हुड के तहत तत्व क्वेरी में स्थिति relativeया होने के लिए प्रश्न में तत्व की आवश्यकता होती हैabsolute इसे लागू किया जाता है, जो मेरी स्थिति के लिए काम नहीं करता था।

मैं intervalएक सीधे setTimeoutया requestAnimationFrameपिछले कार्यान्वयन की तरह Rxjs के साथ इसे संभालने के लिए समाप्त हो गया ।

एक अंतराल के नमूदार स्वाद के बारे में क्या अच्छा है कि आप स्ट्रीम को संशोधित करें लेकिन किसी भी अन्य अवलोकन योग्य को संभाला जा सकता है। मेरे लिए, एक बुनियादी कार्यान्वयन पर्याप्त था, लेकिन आप पागल हो सकते थे और सभी प्रकार के मर्ज आदि कर सकते थे।

नीचे दिए गए उदाहरण में, मैं आंतरिक (हरा) div की चौड़ाई में परिवर्तन पर नज़र रख रहा हूँ। इसकी चौड़ाई 50% है, लेकिन अधिकतम चौड़ाई 200px है। स्लाइडर को खींचने से आवरण (ग्रे) div की चौड़ाई प्रभावित होती है। आप देख सकते हैं कि जब केवल आंतरिक div की चौड़ाई 400px से कम होती है, तो केवल तब देखने योग्य होता है जब आंतरिक div की चौड़ाई बदल जाती है।

const { interval } = rxjs;
const { distinctUntilChanged, map, filter } = rxjs.operators;


const wrapper = document.getElementById('my-wrapper');
const input = document.getElementById('width-input');




function subscribeToResize() {
  const timer = interval(100);
  const myDiv = document.getElementById('my-div');
  const widthElement = document.getElementById('width');
  const isMax = document.getElementById('is-max');
  
  /*
    NOTE: This is the important bit here 
  */
  timer
    .pipe(
      map(() => myDiv ? Math.round(myDiv.getBoundingClientRect().width) : 0),
      distinctUntilChanged(),
      // adding a takeUntil(), here as well would allow cleanup when the component is destroyed
    )
      .subscribe((width) => {        
        widthElement.innerHTML = width;
        isMax.innerHTML = width === 200 ? 'Max width' : '50% width';

      });
}

function defineRange() {
  input.min = 200;
  input.max = window.innerWidth;
  input.step = 10;
  input.value = input.max - 50;
}

function bindInputToWrapper() {
  input.addEventListener('input', (event) => {
    wrapper.style.width = `${event.target.value}px`;
  });
}

defineRange();
subscribeToResize();
bindInputToWrapper();
.inner {
  width: 50%;
  max-width: 200px;
}




/* Aesthetic styles only */

.inner {
  background: #16a085;
}

.wrapper {
  background: #ecf0f1;
  color: white;
  margin-top: 24px;
}

.content {
  padding: 12px;
}

body {
  
  font-family: sans-serif;
  font-weight: bold;
}
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

<h1>Resize Browser width</h1>

<label for="width-input">Adjust the width of the wrapper element</label>
<div>
  <input type="range" id="width-input">
</div>

<div id="my-wrapper" class="wrapper">
  <div id="my-div" class="inner">
    <div class="content">
      Width: <span id="width"></span>px
      <div id="is-max"></div>  
    </div>
  </div>
</div>
स्निपेट का विस्तार करें

— Scrimothy
स्रोत
-1

केवल Window.onResizeविनिर्देश में मौजूद है, लेकिन आप हमेशा अपने DIV के अंदर IFrameनई Windowवस्तु उत्पन्न करने के लिए उपयोग कर सकते हैं ।

कृपया इस उत्तर की जाँच करें । एक नया थोड़ा jquery प्लगइन है , जो पोर्टेबल और उपयोग करने में आसान है। आप हमेशा स्रोत कोड की जांच कर सकते हैं कि यह कैसे किया जाता है।

<!-- (1) include plugin script in a page -->
<script src="/src/jquery-element-onresize.js"></script>

// (2) use the detectResizing plugin to monitor changes to the element's size:
$monitoredElement.detectResizing({ onResize: monitoredElement_onResize });

// (3) write a function to react on changes:
function monitoredElement_onResize() {    
    // logic here...
}
— rbtbar
स्रोत
यदि आपके पास resizable divs है तो यह अत्यधिक अप्रभावी समाधान है।
— सूर्यास्त 15
-1

मुझे लगा कि यह नहीं किया जा सकता है, लेकिन फिर मैंने इसके बारे में सोचा, आप मैन्युअल रूप से स्टाइल के माध्यम से एक div का आकार बदल सकते हैं = "आकार: दोनों;" ऐसा करने के लिए कि आपने इस पर क्लिक करने के लिए तत्व की ऊँचाई और चौड़ाई की जाँच करने के लिए एक ऑनक्लिक फ़ंक्शन जोड़ा। शुद्ध जावास्क्रिप्ट की केवल 5 पंक्तियों के साथ (सुनिश्चित करें कि यह और भी छोटी हो सकती है) http://codepen.io/anon/pen/eNyyVN

<div id="box" style="
                height:200px; 
                width:640px;
                background-color:#FF0066;
                resize: both;
                overflow: auto;" 
                onclick="myFunction()">
    <p id="sizeTXT" style="
                font-size: 50px;">
       WxH
    </p>
    </div>

<p>This my example demonstrates how to run a resize check on click for resizable div.</p>

<p>Try to resize the box.</p>


<script>
function myFunction() {
var boxheight = document.getElementById('box').offsetHeight;
var boxhwidth = document.getElementById('box').offsetWidth;
var txt = boxhwidth +"x"+boxheight;
document.getElementById("sizeTXT").innerHTML = txt;
}
</script>
— PixelPimp
स्रोत
2
यह केवल तभी गणना करता है जब एक क्लिक ईवेंट को निकाल दिया जाता है जो प्रश्न की आवश्यकता का हिस्सा नहीं है।
— रोब इवांस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.