jquery $ (विंडो) .width () और $ (विंडो) .height () व्यूपोर्ट के आकार में परिवर्तन नहीं होने पर विभिन्न मान लौटाते हैं


105

मैं jquery का उपयोग करके एक साइट लिख रहा हूं जो बार-बार कॉल करता है $(window).width()और $(window).height()व्यूपोर्ट आकार के आधार पर तत्वों और स्थिति को आकार देता है।

समस्या निवारण में मुझे पता चला कि जब व्यूपोर्ट का आकार परिवर्तन नहीं किया जाता है तो मैं उपरोक्त jquery फ़ंक्शंस में बार-बार कॉल करने के लिए अलग व्यूपोर्ट आकार की रिपोर्ट प्राप्त कर रहा हूं।

आश्चर्य होता है कि कोई विशेष मामला है, किसी को भी पता है कि ऐसा कब होता है, या यदि यह सिर्फ तरीका है। बताए गए आकारों में अंतर 20px या उससे कम है, यह प्रकट होता है। यह मैक ओएस एक्स 10.6.2 पर सफारी 4.0.4, फ़ायरफ़ॉक्स 3.6.2 और क्रोम 5.0.342.7 बीटा में होता है। मैंने अभी तक अन्य ब्राउज़रों का परीक्षण नहीं किया है क्योंकि यह ब्राउज़र के लिए विशिष्ट प्रतीत नहीं होता है। मैं यह भी पता लगाने में असमर्थ था कि क्या अंतर निर्भर करता है, अगर यह व्यूपोर्ट का आकार नहीं है, तो क्या कोई अन्य कारक हो सकता है जो परिणामों को अलग बनाता है?

किसी भी जानकारी की सराहना की जाएगी।


अपडेट करें:

यह मूल्यों का नहीं है $(window).width()और $(window).height()यह बदल रहा है। यह उन चर का मान है जो मैं उपरोक्त मूल्यों को संग्रहीत करने के लिए उपयोग कर रहा हूं।

यह स्क्रॉलबार नहीं है जो मानों को संक्रमित कर रहे हैं, चर मानों में परिवर्तन होने पर कोई स्क्रॉलबार दिखाई नहीं देता है। यहां मेरे चर में मूल्यों को संग्रहीत करने के लिए मेरा कोड है (जो मैं कर रहा हूं बस वे छोटे हैं)।

(यह सब भीतर है $(document).ready())

// शुरुआत में वेरिएबल्स को ओटोर फंक्शन में दिखाई देने की घोषणा करते हैं .ready()

var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
var documentWidth = $(document).width(); //retrieve current document width
var documentHeight = $(document).height(); //retrieve current document height
var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position


function onm_window_parameters(){ //called on viewer reload, screen resize or scroll

    windowWidth = $(window).width(); //retrieve current window width
    windowHeight = $(window).height(); //retrieve current window height
    documentWidth = $(document).width(); //retrieve current document width
    documentHeight = $(document).height(); //retrieve current document height
    vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
    hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position

}; //end function onm_window_parameters()

मैंने उन मानों के विरुद्ध उपरोक्त चर की जांच के लिए एक अलर्ट स्टेटमेंट डाला, जिन्हें वे धारण करने वाले हैं। $(item).param()मान लगातार बने रहते हैं, लेकिन जिन कारणों से मैं समझ नहीं पाता, उनके लिए मेरे चर बदल जाते हैं।

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

जवाबों:


98

मुझे लगता है कि आप जो देख रहे हैं वह स्क्रॉलबार का छिपाना और दिखाना है। यहां एक त्वरित डेमो है जो चौड़ाई में बदलाव दिखाता है

एक तरफ के रूप में: क्या आपको लगातार मतदान करने की आवश्यकता है? आप इस तरह से आकार बदलने की घटना पर चलने के लिए अपने कोड को अनुकूलित करने में सक्षम हो सकते हैं:

$(window).resize(function() {
  //update stuff
});

1
btw, आप बिल्कुल सही थे ... समस्या निवारण के दौरान मैंने देखा कि स्क्रॉलबार थे। वे इतने संक्षिप्त रूप में दिखाई दिए कि उन्हें मध्य-निष्पादन में रोकी गई स्क्रिप्ट के साथ डिबग मोड को छोड़कर नहीं देखा जा सका। एक बार जब मैंने उपरोक्त चर और फ़ंक्शन को हटा दिया, तो कुछ तत्व अभी भी स्थिति से कूद गए थे - यह स्क्रिप्ट चरणों के क्रम के साथ करना था - मुझे बस यह सुनिश्चित करना था कि मैं अपनी सम्मिलित छवियों को पकड़कर बाईं ओर सीएसएस पर रीसेट कर दूं: छवि डालने से पहले 0 । कहानी के लिए नैतिक: सिर्फ इसलिए कि स्क्रॉलबार्स लंबे समय तक दिखाई नहीं देते हैं, इसका मतलब यह नहीं है कि वे वहां नहीं थे!
मनका वीक्स

मैं इस प्रश्न का भी उपयोग करूंगा: stackoverflow.com/questions/2854407/… ताकि आप कुछ भी करने से पहले एक बार आकार बदलने की घटना समाप्त होने पर जांच कर सकें। आपकी स्क्रिप्ट वही चलेगी जो कभी भी .resize () में है हर पिक्सेल को आप आकार देते हैं, इसलिए बेहतर अभ्यास करना है।
मार्क

9

एक का उपयोग करने की कोशिश करो

  • $(window).load प्रतिस्पर्धा

या

  • $(document).ready

    क्योंकि प्रारंभिक मान पार्सिंग के दौरान या DOM लोड के दौरान होने वाले परिवर्तनों के कारण अनिश्चित हो सकते हैं।


3

ध्यान दें कि यदि स्क्रोलबार, पुटिंग के कारण समस्या उत्पन्न हो रही है

body {
  overflow: hidden;
}

आपके सीएसएस में एक आसान सुधार हो सकता है (यदि आपको स्क्रॉल करने के लिए पेज की आवश्यकता नहीं है)।


1

मुझे एक समान समस्या हो रही थी। जब मैंने अपना पृष्ठ ताज़ा किया तो मुझे असंगत ऊँचाई () मान मिल रहा था। (यह समस्या का कारण मेरा चर नहीं था, यह वास्तविक ऊंचाई मूल्य था।)

मैंने देखा कि मेरे पेज के प्रमुख में मैंने अपनी स्क्रिप्ट को पहले कॉल किया, फिर मेरी सीएसएस फ़ाइल। मैंने स्विच किया ताकि css फ़ाइल पहले लिंक हो जाए, फिर स्क्रिप्ट फ़ाइलें और लगता है कि अब तक समस्या ठीक हो गई है।

उम्मीद है की वो मदद करदे।


वास्तव में, मेरी मूल समस्या यह थी कि जिस तरह से मेरे तत्व पृष्ठ के चारों ओर खुद को स्थिति में ला रहे थे, वह स्क्रॉलबार को माप के लिए एक दूसरे के एक अंश के लिए प्रकट होने के लिए प्रेरित कर रहा था, लेकिन इसे पकड़ने के लिए आंख के लिए पर्याप्त नहीं था ... मुझे लगा। एक बार जब मैंने अलग-अलग राज्यों में कोड तोड़ने के लिए अपने जावास्क्रिप्ट स्टेटमेंट के बीच अलर्ट स्टेटमेंट डाल दिया। मैंने ऐसा किया था ताकि मैं अलर्ट को कोड निष्पादन में हर चरण में माप रिपोर्ट कर सकूं। यही कारण है कि जब मैंने देखा कि राज्यों में से एक स्क्रॉलबार दिखाई दे रहा है, तो ऐसा लगता है कि राज्य माप लिया गया था।
मानका वीक

1
मैं स्क्रॉल बार के साथ एक ही बात की पुष्टि कर सकता हूं। मैं ब्राउज़र का आकार बदलने के बाद $ (विंडो) .height () का एक पाठ करूँगा और यह 500 जैसा कुछ दिखा सकता है। तब मैं ताज़ा करूँगा (ब्राउज़र का आकार बदले बिना) और यह 700 की तरह कुछ बड़ा दिखाएगा। मेरे मामला, मैं इसे केवल अतिप्रवाह करके ठीक करने में सक्षम था: शरीर पर छिपा हुआ, क्योंकि मैं कभी भी स्क्रॉलबार को चालू नहीं करना चाहता। एक बार मैंने ऐसा किया था, ऊंचाई रिपोर्ट सुसंगत थी।
sbuck
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.