Pencere yeniden boyutlandırmada jQuery

Aşağıdaki JQuery kodu var:

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

Tek sorun bu sadece tarayıcı ilk yüklendiğinde çalışır, ben containerHeightde pencereyi yeniden boyutlandırırken de kontrol etmek istiyorum ?

Herhangi bir fikir?

Yeniden boyutlandırma olaylarını işlemek için jQuery, javascript ve css kullanan bir örnek.
(sadece yeniden boyutlandırma (medya sorguları) üzerine şeyler stilize ediyorsanız en iyi bahis)
http://jsfiddle.net/CoryDanielson/LAF4G/

css

.footer 
{
    /* default styles applied first */
}

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

javaScript

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) { /* ... */ }
});

Yeniden boyutlandırma kodumun bu kadar sık ​​çalışmasını nasıl önleyebilirim?

Yeniden boyutlandırmaya bağlanırken fark edeceğiniz ilk sorun budur. Kullanıcı tarayıcıyı manuel olarak yeniden boyutlandırdığında yeniden boyutlandırma kodu LOT olarak adlandırılır ve oldukça sarsıntılı hissedebilir.

Senin boyutlandırma kod denir ne sıklıkta sınırlamak için kullanabilirsiniz Sıçrama veya gaz kelebeği gelen yöntemler çizgi ve lowdash kütüphaneler.

• debounceyeniden boyutlandırma kodunuzu yalnızca LAST yeniden boyutlandırma olayından sonraki milisaniye sayısı kadar yürütür. Bu, kullanıcı tarayıcıyı yeniden boyutlandırdıktan sonra yeniden boyutlandırma kodunuzu yalnızca bir kez aramak istediğinizde idealdir. Her bir yeniden boyutlandırma etkinliğini güncellemek pahalı olabilecek grafikleri, grafikleri ve düzenleri güncellemek için iyidir.
• throttleyeniden boyutlandırma kodunuzu yalnızca her X milisaniyede bir yürütür. Kodun ne sıklıkta çağrıldığını "kısıtlar". Bu, yeniden boyutlandırma olaylarında sık kullanılmaz, ancak farkında olmaya değer.

Alt çizginiz veya lowdash'ınız yoksa, benzer bir çözümü kendiniz uygulayabilirsiniz: JavaScript / JQuery: $ (window). Yeniden boyutlandırma tamamlandıktan SONRA nasıl tetiklenir?

Javascript'inizi bir işleve taşıyın ve pencereyi yeniden boyutlandırmak için bu işlevi bağlayın.

$(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 () penceresine ekleyebileceğiniz bir resize olay işleyicisine sahiptir . Yani, koyarsanız $(window).resize(function(){/* YOUR CODE HERE */}), pencere her yeniden boyutlandırıldığında kodunuz çalıştırılacaktır.

Yani, ilk sayfa yüklendikten sonra ve pencere yeniden boyutlandırıldığında kodu çalıştırmak istersiniz. Bu nedenle kodu kendi işlevine çekmeli ve bu işlevi her iki durumda da çalıştırmalısınız.

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

Bkz: Tarayıcılar arası pencere yeniden boyutlandırma etkinliği - JavaScript / jQuery

Bu çözümü deneyin. Yalnızca sayfa yüklendikten sonra ve önceden tanımlanmış pencere yeniden boyutlandırma sırasında tetiklenir 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;
    });
});

Anonim işlevinize bir ad verin, ardından:

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

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

onu da kullanabilir

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

function myResizeFunction() {
  ...
}

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

Bu, yeniden boyutlandırma işleyicinizin pencere yeniden boyutlandırması ve belge hazır olduğunda tetiklemesine neden olur. Tabii ki, .trigger('resize')bunun yerine sayfa yüklemede çalıştırmak istiyorsanız yeniden boyutlandırma işleyicinizi belge hazır işleyicinin dışına ekleyebilirsiniz .

GÜNCELLEME : Başka bir üçüncü taraf kitaplığını kullanmak istemiyorsanız başka bir seçenek daha.

Bu teknik, hedef öğenize belirli bir sınıf ekler, böylece stili yalnızca CSS üzerinden kontrol etme (ve satır içi stilden kaçınma) avantajına sahip olursunuz.

Ayrıca sınıfın her bir yeniden boyutlandırmada değil, yalnızca gerçek eşik noktası tetiklendiğinde eklenmesini veya kaldırılmasını sağlar. Yalnızca bir eşik noktasında ateşlenir: yükseklik <= 818'den> 819'a değiştiğinde veya tersi olduğunda ve her bölge içinde birden fazla kez olmadığında. Genişlikteki herhangi bir değişiklikle ilgili değildir .

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

Örnek olarak, bazı CSS kurallarınız olarak aşağıdakilere sahip olabilirsiniz:

.footer {
  bottom: auto;
  left: auto;
  position: static;
}

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

Bunu kullan:

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

Tarayıcıyı yeniden boyutlandırdığınızda resizekullanarak bağlanabilir .resize()ve kodunuzu çalıştırabilirsiniz. Ayrıca deyiminize bir elsekoşul eklemeniz gerekir, ifböylece css değerleriniz yalnızca yeniyi ayarlamak yerine eski ve yeniyi değiştirir.