SORU
22 Mart 2012, PERŞEMBE


pencere üzerinde bir WordPress kullanmak yeniden boyutlandırmak

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 olarak yüklendiğinde çalışır, containerHeight ya da pencere yeniden boyutlandırma zaman kontrol olmak istiyorum?

Herhangi bir fikir?

CEVAP
22 Mart 2012, PERŞEMBE


İşte bir örnek, jQuery, javascript ve css boyutlandırma olayları işlemek için kullanarak. < / ^ br . (eğer sadece yeniden boyutlandırma (medya sorgu)) şeyler biçimlendirme iseniz, en iyi bahis eğer css< / ^ br . 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) {  /* ... */ }
}

bir WordPress kullanmak

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

Nasıl bu kadar sık yürütülmesini yeniden boyutlandırmak benim kod dur.

Bu yeniden boyutlandırmak için bağlayıcı ne zaman fark edeceksiniz ilk sorun. Yeniden boyutlandırma kodu manuel tarayıcı yeniden boyutlandırma bir SÜRÜ çağrılır, ve bayağı dandik hissediyorum.

Yeniden boyutlandırma kod adlı miktarını sınırlamak için underscore & lowdash kütüphaneler debounce throttle yöntemleri kullanabilirsiniz.

  • debounce sadece SON resize olayından sonra milisaniye boyutlandırma kodu X numaranızı yürütülür. Bu, kullanıcının tarayıcı yeniden boyutlandırma yapıldıktan sonra sadece yeniden boyutlandırma sonra kod aramak istediğinizde idealdir. Güncelleme grafikler, çizelgeler ve pahalı olabilir bu düzenleri her olayı yeniden güncelleme için çok iyi oldu.
  • throttle sadece yeniden boyutlandırma kodu milisaniye her X sayısı yürütülür. Bu "kod" denir. klapeler Bu kadar sık resize olayları ile kullanılan değil, ama farkında olmak, değer.

Eğer alt çizgi veya lowdash yok eğer doğru değilse, benzer bir çözüm kendinize uygulayabilirsiniz: JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • EatingIn

    EatingIn

    12 EKİM 2013
  • International Secret Agents Concerts

    Internationa

    2 Aralık 2008
  • Shameless Maya

    Shameless Ma

    24 Mayıs 2012