खिड़की पर jQuery के आकार

Question

मेरे पास निम्नलिखित 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यह भी जांचना चाहता हूं कि वे खिड़की का आकार बदल रहे हैं?

कोई विचार?

Comments

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

— रोब डब्ल्यू

Answer 1

यहाँ एक उदाहरण jQuery, जावास्क्रिप्ट और 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) { /* ... */ }
});

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

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

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

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

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

Comments

महान जवाब के लिए Thx; और बहस / गला घोंटना जानकारी के लिए; और स्वयं-रोल समाधान के लिंक के लिए।

— 17

Answer 2

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

$(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'
        });
    }
}

Answer 3

jQuery का एक आकार बदलने वाला इवेंट हैंडलर है जिसे आप विंडो में संलग्न कर सकते हैं ।resize () । इसलिए, यदि आप डालते हैं $(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

Comments

... या आप दस्तावेज़ तैयार हैंडलर को फिर से लिख सकते हैं$(function() { $(window).resize(positionFooter).triggerHandler('resize'); });

— WynandB

Answer 4

इस समाधान की कोशिश करो। पृष्ठ लोड होते ही केवल आग लग जाती है और फिर विंडो के दौरान पूर्वनिर्धारित पर आकार बदल जाता है 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;
    });
});

Comments

यह मेरे लिए काम करता है, धन्यवाद। लेकिन क्या आप यह बता सकते हैं कि आपका "var resizer = function ()" वास्तव में क्यों निकाल दिया जाता है? मेरी समझ में, आप केवल $ (विंडो) में वैरिएबल doResize ईवेंट सेट करते हैं। लेकिन फ़ंक्शन को स्वयं कॉल न करें।

— अलेक्जेंडर

फ़ंक्शन के लिए एक कॉल है: resizer();अंतराल सेट करने के ठीक बाद। और क्योंकि doResizeयह सेट है true, यह दस्तावेज़ तैयार होने पर निकाल दिया जाता है।

— इन विट्रो

हां, मेरे लिए यह समझ में आता है कि फ़ंक्शन को पहले से ही निष्पादित किया गया है। लेकिन मुझे समझ नहीं आ रहा है कि आकार बदलने के बाद भी फ़ंक्शन को क्यों निष्पादित किया जाता है, क्योंकि मेरी समझ में केवल चर सेट है। मेरे लिए यह केवल तभी समझ में आएगा जब दस्तावेज़ का आकार बदलने के बाद। पहले से ही फिर से निकाल दिया जाता है, ताकि फ़ंक्शन को फिर से शुरू किया जाए (लेकिन ऐसा नहीं होना चाहिए?)।

— अलेक्जेंडर

वहाँ अंतराल सेट चेकों बार-बार हर वह यह है कि resizeDelayयदि doResizeचर के लिए निर्धारित है true। और doResizeभी करने के लिए सेट कर दिया जाता trueपर $(window).resize()। तो आप विंडो को फिर से आकार देते हैं, जो अगले चेक के दौरान और उसके बाद सेट doResizeहोता हैtrueresizer() समारोह कहा जाता है।

— विट्रो

Answer 5

अपने अनाम फ़ंक्शन को एक नाम दें, फिर:

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

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

Answer 6

इसका भी उपयोग कर सकते हैं

        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();
            });

Comments

कृपया समझाएं कि कोड थोड़ा अधिक क्या करता है। आप वास्तव में एक उत्तर की पेशकश नहीं कर रहे हैं।

— सेरेलकार्सी

Answer 7

function myResizeFunction() {
  ...
}

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

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

अपडेट करें : यदि आप किसी अन्य तृतीय-पक्ष लाइब्रेरी का उपयोग नहीं करना चाहते हैं, तो यहां एक और विकल्प है।

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

यह यह भी सुनिश्चित करता है कि वास्तविक थ्रेशोल्ड बिंदु ट्रिगर होने पर वर्ग केवल जोड़ा या हटाया जाता है और प्रत्येक और हर आकार पर नहीं। यह केवल एक सीमा बिंदु पर फायर करेगा : जब ऊंचाई <= 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;
}

Answer 8

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

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

Answer 9

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