दिलचस्प पोस्ट
जावास्क्रिप्ट कंसोल में रंग मूल्य की चौड़ाई के लिए ऑटो-स्केलिंग इनपुट ? सर्वर का आईपी पता कैसे प्राप्त करें जिस पर मेरा सी # एप्लिकेशन चल रहा है? पाठ-ओवरफ्लो: फ़ायरफ़ॉक्स 4 में एलीप्सिस? (और एफएफ 5) सकारात्मक पूर्णांक में गैर शून्य बिट्स की गणना करने का फास्ट रास्ता आईफ़ोन: अंतिम स्क्रीन स्पर्श के बाद उपयोगकर्ता निष्क्रियता / निष्क्रिय समय का पता लगा रहा है जेपीए 2.0: स्थिरता के लिए इकाई वर्गों को जोड़ने- अलग-अलग जार से * यूनिट * स्वचालित रूप से 'WebForm_DoPostBackWithOptions' IE11 पूर्वावलोकन में अनिर्धारित है किसी रूप में कहीं और संदर्भ चर और ऑब्जेक्ट Pickle.dump – TypeError का प्रयोग करना: स्ट्रेट होना चाहिए, बाइट्स नहीं एंड्रॉइड कैसे ImageView पर मुखौटा लागू करने के लिए? ASP.NET प्रमाणीकरण लॉगिन और ब्राउज़र बैक बटन के साथ लॉग आउट करें मैं पायथन 3 में raw_input का उपयोग कैसे करूं? पृष्ठ का उपयोग करते हुए सेलेनियम वेबड्राइवर (सेलेनियम 2) में पृष्ठ ऊपर या नीचे स्क्रॉल करें ES6 वर्ग परिवर्तनीय विकल्प

विंडो का आकार बदलने पर jQuery

मेरे पास निम्न JQuery कोड है:

$(document).ready(function () { var $containerHeight = $(window).height(); if ($containerHeight <= 818) { $('.footer').css({ position: 'static', bottom: 'auto', left: 'auto' }); } if ($containerHeight > 819) { $('.footer').css({ position: 'absolute', bottom: '3px', left: '0px' }); } }); 

एकमात्र समस्या यह है कि यह केवल तभी काम करता है जब ब्राउज़र पहले लोड होता है, मैं containerHeight चाहता हूं कि जब भी वे विंडो का आकार बदल रहे हों, तब भी जांच की जाए?

कोई विचार?

वेब के समाधान से एकत्रित समाधान "विंडो का आकार बदलने पर jQuery"

पुन: आकार इवेंट्स को प्रबंधित करने के लिए यहां jQuery, javascript और css का उपयोग करते हुए एक उदाहरण है।
(सीएसएस यदि आपके आकार बदलने पर चीजों को व्यवस्थित करने पर आपकी सर्वश्रेष्ठ शर्त है (मीडिया क्वेरीज़)
http://jsfiddle.net/CoryDanielson/LAF4G/

सीएसएस

 .footer { /* default styles applied first */ } @media screen and (min-height: 820px) /* height >= 820 px */ { .footer { position: absolute; bottom: 3px; left: 0px; /* more styles */ } } 

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

 window.onresize = function() { if (window.innerHeight >= 820) { /* ... */ } if (window.innerWidth <= 1280) { /* ... */ } } 

jQuery

 $(window).on('resize', function(){ var win = $(this); //this = window if (win.height() >= 820) { /* ... */ } if (win.width() >= 1280) { /* ... */ } }); 

मैं अपने आकार बदलने के कोड को इतनी बार क्रियान्वित करने से कैसे रोकूं !?

यह पहली समस्या है जिसे आप फिर से आकार में बाध्य करने के लिए नोटिस करेंगे। जब उपयोगकर्ता ब्राउज़र को मैन्युअल रूप से रीसाइज़ कर रहा है, तो फिर से साइज कोड को बहुत कुछ कहा जाता है, और यह बहुत ही आसान लग सकता है।

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

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

यदि आपके पास अंडरस्कोर या कम डैश नहीं है, तो आप स्वयं के समान हल लागू कर सकते हैं: JavaScript / JQuery: $ (विंडो) .आप को फिर से आकार के बाद कैसे फेंकना चाहिए?

अपने जावास्क्रिप्ट को किसी फ़ंक्शन में ले जाएं और फिर उस फ़ंक्शन को विंडो रीसाइज करें।

 $(document).ready(function () { updateContainer(); $(window).resize(function() { updateContainer(); }); }); function updateContainer() { var $containerHeight = $(window).height(); if ($containerHeight <= 818) { $('.footer').css({ position: 'static', bottom: 'auto', left: 'auto' }); } if ($containerHeight > 819) { $('.footer').css({ position: 'absolute', bottom: '3px', left: '0px' }); } } 

jQuery का एक आकार इवेंट हैंडलर है जिसे आप विंडो से संलग्न कर सकते हैं, .resize () । इसलिए, अगर आपने $(window).resize(function(){/* YOUR CODE HERE */}) दिया है। $(window).resize(function(){/* YOUR CODE HERE */}) तो आपका कोड हर बार विंडो का आकार बदल जाएगा।

तो, आप क्या चाहते हैं, पहले पृष्ठ लोड के बाद कोड को चलाने के लिए और जब भी विंडो को पुनःआकार किया जाता है इसलिए आपको कोड को अपनी फ़ंक्शन में खींचना चाहिए और उस समारोह को दोनों उदाहरणों में चलाया जाना चाहिए।

 // This function positions the footer based on window size function positionFooter(){ var $containerHeight = $(window).height(); if ($containerHeight <= 818) { $('.footer').css({ position: 'static', bottom: 'auto', left: 'auto' }); } else { $('.footer').css({ position: 'absolute', bottom: '3px', left: '0px' }); } } $(document).ready(function () { positionFooter();//run when page first loads }); $(window).resize(function () { positionFooter();//run on every window resize }); 

देखें: क्रॉस-ब्राउज़र विंडो का आकार बदलना ईवेंट – जावास्क्रिप्ट / jQuery

इस समाधान की कोशिश करो केवल पेज लोड होने पर और फिर पूर्वनिर्धारित आकार में विंडो resizeDelay आग लग resizeDelay

 $(document).ready(function() { var resizeDelay = 200; var doResize = true; var resizer = function () { if (doResize) { //your code that needs to be executed goes here doResize = false; } }; var resizerInterval = setInterval(resizer, resizeDelay); resizer(); $(window).resize(function() { doResize = true; }); }); 

अपना अनाम समारोह एक नाम दें, फिर:

 $(window).on("resize", doResize); 

http://api.jquery.com/category/events/

इसका इस्तेमाल भी कर सकते हैं

  function getWindowSize() { var fontSize = parseInt($("body").css("fontSize"), 10); var h = ($(window).height() / fontSize).toFixed(4); var w = ($(window).width() / fontSize).toFixed(4); var size = { "height": h ,"width": w }; return size; } function startResizeObserver() { //--------------------- var colFunc = { "f10" : function(){ alert(10); } ,"f50" : function(){ alert(50); } ,"f100" : function(){ alert(100); } ,"f500" : function(){ alert(500); } ,"f1000" : function(){ alert(1000);} }; //--------------------- $(window).resize(function() { var sz = getWindowSize(); if(sz.width > 10){colFunc['f10']();} if(sz.width > 50){colFunc['f50']();} if(sz.width > 100){colFunc['f100']();} if(sz.width > 500){colFunc['f500']();} if(sz.width > 1000){colFunc['f1000']();} }); } $(document).ready(function() { startResizeObserver(); }); 

इसे इस्तेमाल करो:

 window.onresize = function(event) { ... } 

.resize() का उपयोग करके आप का resize सकते हैं और जब आपका ब्राउज़र .resize() हो जाता है तो अपना कोड चला सकते हैं। आपको अपने कथन स्टेटमेंट में एक else शर्त भी जोड़नी होगी ताकि आपकी सीएसएस वैल्यू सिर्फ नए को स्थापित करने के बजाय पुराने और नए को बदल सके।

 function myResizeFunction() { ... } $(function() { $(window).resize(myResizeFunction).trigger('resize'); }); 

इससे आपके आकार के हैंडलर को विंडो आकार बदलने और डॉक्यूमेंट तैयार करने के लिए ट्रिगर किया जाएगा। बेशक, यदि आप चाहें तो दस्तावेज़ तैयार हैंडलर के बाहर अपने आकार के हैंडलर को संलग्न कर सकते हैं। .trigger('resize') को पृष्ठ लोड पर चलाने के बजाय

अद्यतनः यहां एक और विकल्प है, अगर आप किसी भी अन्य तीसरे पक्ष के पुस्तकालयों का उपयोग नहीं करना चाहते हैं

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

यह यह भी सुनिश्चित करता है कि जब वास्तविक थ्रेशोल्ड प्वाइंट ट्रिगर हो और प्रत्येक और प्रत्येक आकार पर क्लास केवल जोड़ या निकाला जाता है यह केवल एक थ्रेशोल्ड बिंदु पर आग लगाएगा: जब ऊंचाई <= 818 से> 819 या इसके विपरीत हो और प्रत्येक क्षेत्र के भीतर कई बार नहीं यह चौड़ाई में किसी भी परिवर्तन से चिंतित नहीं है।

 function myResizeFunction() { var $window = $(this), height = Math.ceil($window.height()), previousHeight = $window.data('previousHeight'); if (height !== previousHeight) { if (height < 819) previousHeight >= 819 && $('.footer').removeClass('hgte819'); else if (!previousHeight || previousHeight < 819) $('.footer').addClass('hgte819'); $window.data('previousHeight', height); } } $(function() { $(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace'); }); 

एक उदाहरण के रूप में, आपके पास अपने कुछ सीएसएस नियमों के रूप में निम्न हो सकते हैं:

 .footer { bottom: auto; left: auto; position: static; } .footer.hgte819 { bottom: 3px; left: 0; position: absolute; }