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
İş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?
Nasıl eğer fare bir WordPress kullanma...
Nasıl/yenileme yeniden bir WordPress k...
JavaScript/JQuery: (pencere)$.boyutlan...
bir WordPress kullanmak durumunda olay...
AJAX Başarı JSON sonuç üzerinde bir Wo...