पता लगाएँ कि जावास्क्रिप्ट का उपयोग करके विंडो को कब बदला जाता है?

Question

जब उपयोगकर्ता ब्राउज़र विंडो का आकार बदलने के लिए समाप्त होता है, तो क्या jQuery या जावास्क्रिप्ट के साथ कोई फ़ंक्शन होता है?

अन्य शब्दों में:

1. जब उपयोगकर्ता ब्राउज़र विंडो का आकार बदल रहा है तो क्या मैं माउस अप इवेंट का पता लगा सकता हूं? अन्यथा:
2. क्या मैं पता लगा सकता हूं कि विंडो का आकार परिवर्तन ऑपरेशन कब समाप्त हुआ?

मैं वर्तमान में केवल एक घटना को ट्रिगर करने में सक्षम हूं जब उपयोगकर्ता jQuery के साथ विंडो का आकार बदलना शुरू करता है

Comments

यहाँ एक jQuery और गैर-jQuery समाधान है: github.com/louisremi/jquery-smartresize

— bradt

jquery-smartresize बहस की घटनाओं के लिए सुंदर समाधान!

— तेतरी

@bradt को jQuery प्लगइन का उपयोग करने की कोई आवश्यकता नहीं है जब यह सब वेनिला जावास्क्रिप्ट में आसानी से किया जा सकता है

— जेम्स डगलस

Answer 1

आप .resize()हर बार चौड़ाई / ऊँचाई को वास्तव में बदलने के लिए उपयोग कर सकते हैं , जैसे:

$(window).resize(function() {
  //resize just happened, pixels changed
});

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

---

संपादित करें: टिप्पणियों से ऐसा लगता है कि आप "ऑन-एंड" ईवेंट की तरह कुछ चाहते हैं, जो समाधान आपको मिला है, वह कुछ अपवादों के साथ है (आप माउस-अप और क्रॉस-ब्राउज़र तरीके से विराम के बीच अंतर नहीं कर सकते, एक के लिए एक ही अंत एक बनाम ठहराव )। आप इस घटना को थोड़ा क्लीनर बनाने के लिए बना सकते हैं , जैसे कि:

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

आपके पास यह कहीं भी एक आधार फ़ाइल हो सकती है, जो कुछ भी आप करना चाहते हैं ... तो आप उस नई resizeEndघटना के लिए बाध्य कर सकते हैं जिसे आप ट्रिगर कर रहे हैं, जैसे:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

आप यहाँ इस दृष्टिकोण का एक काम डेमो देख सकते हैं

Comments

यह ब्राउज़र पर निर्भर करता है कि कब और कितनी आकार की घटनाओं को निकाल दिया जाता है: quirksmode.org/dom/events/resize.html

— क्रिस लीचर

@chris_l: मुझे यकीन नहीं है कि वह पृष्ठ अब कितना सटीक है ... नवीनतम फ़ायरफ़ॉक्स में मैंने जो डेमो पोस्ट किया है, उसे खोलें, यह हर बार फायर कर रहा है जब आकार यहां बदलता है। मेरे पास परीक्षण करने के लिए ओपेरा नहीं है, यह अभी भी अलग हो सकता है, लेकिन वे कम से कम अधिक संगत हैं quirksmode से पता चलता है, मैं उन्हें एक नोट भेजूंगा यह अद्यतन करने की आवश्यकता है।

— निक Craver

@ निक: हाँ, quirksmode पृष्ठ केवल 3.1b2 तक FF को कवर करता है - लेकिन इस तरह के शो, कि यह ब्राउज़र पर निर्भर करता है ...

— Chris Lercher

मैं बस द्वारा ड्रॉप करना चाहता हूं और कहता हूं कि यह तब भी चालू हो जाता है जब उपयोगकर्ता मोबाइल उपकरणों पर पृष्ठ में ज़ूम करता है।

— हॉफमैन

window.addEventListener ('आकार', फ़ंक्शन () {}, सच);

— वेबवंडर

Answer 2

इस के साथ प्राप्त किया जा सकता onresize GlobalEventHandlers इंटरफ़ेस में प्रॉपर्टी जावास्क्रिप्ट में, करने के लिए एक समारोह बताए द्वारा onresize संपत्ति है, इसलिए की तरह:

window.onresize = functionRef;

निम्न कोड स्निपेट यह प्रदर्शित करता है, जब भी यह आकार बदलता है, विंडो के इनरव्हीड और इनरहाइट लॉगिंग कंसोल द्वारा। (विंडो के आकार बदलने के बाद रिसाइज़ इवेंट की आग)

function resize() {
  console.log("height: ", window.innerHeight, "px");
  console.log("width: ", window.innerWidth, "px");
}

window.onresize = resize;

<p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

Answer 3

केवल जावास्क्रिप्ट का उपयोग करके ऐसा करने का एक और तरीका यह होगा:

window.addEventListener('resize', functionName);

यह हर बार आकार बदलता है, अन्य उत्तर की तरह आकार बदलता है।

functionName फ़ंक्शन का नाम निष्पादित किया जा रहा है जब विंडो का आकार बदला जाता है (अंत में ब्रैकेट आवश्यक नहीं हैं)।

Answer 4

यदि आप केवल स्क्रॉल समाप्त होने पर जांच करना चाहते हैं, तो वेनिला जेएस में, आप इस तरह के समाधान के साथ आ सकते हैं:

सुपर सुपर कॉम्पैक्ट

var t
window.onresize = () => { clearTimeout(t) t = setTimeout(() => { resEnded() }, 500) }
function resEnded() { console.log('ended') }

सभी 3 संभावित संयोजन एक साथ (ES6)

var t
window.onresize = () => {
    resizing(this, this.innerWidth, this.innerHeight) //1
    if (typeof t == 'undefined') resStarted() //2
    clearTimeout(t); t = setTimeout(() => { t = undefined; resEnded() }, 500) //3
}

function resizing(target, w, h) {
    console.log(`Youre resizing: width ${w} height ${h}`)
}    
function resStarted() { 
    console.log('Resize Started') 
}
function resEnded() { 
    console.log('Resize Ended') 
}