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, javascript та css для обробки подій розміру.
(css, якщо ви найкраще ставите, якщо ви просто стилізуєте речі на розмір (медіа-запити))
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) { /* ... */ }
});

Як я зупиняю так, щоб мій розмір коду не був виконаний так часто !?

Це перша проблема, яку ви помітите при прив'язці до зміни розміру. Код зміни розміру називається ЛОТ, коли користувач змінює розмір веб-переглядача вручну, і може відчувати себе досить привабливим.

Для того, щоб обмежити , як часто називають ваш код зміни розміру, ви можете використовувати брязкіт або дросельні методи з підкреслення і lowdash бібліотек.

• debounceвиконає ваш код розміру X кількість мілісекунд після останньої події зміни розміру. Це ідеально, коли ви хочете зателефонувати лише коду зміни розміру один раз, після того, як користувач змінить розмір браузера. Це добре для оновлення графіків, діаграм та макетів, які можуть бути дорогими для оновлення кожної події зміни розміру.
• throttleбуде виконувати ваш код розміру лише кожні X число мілісекунд. Це "заглушує" те, як часто викликається код. Це використовується не так часто при подіях зміни розміру, але варто пам’ятати про це.

Якщо у вас немає підкреслення або низького штриху, ви можете реалізувати подібне рішення самостійно: JavaScript / JQuery: $ (window) .розмір, як запустити ПІСЛЯ завершення зміни розміру?

Перемістіть JavaScript у функцію, а потім прив’яжіть цю функцію до розміру вікна.

$(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 */})ваш код запускатиметься кожного разу, коли розмір вікна буде змінено.

Отже, потрібно запустити код після завантаження першої сторінки та кожного разу, коли вікно буде змінено. Тому слід перетягнути код у свою функцію та запустити цю функцію в обох випадках.

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

Див.: Подія зміни розміру вікна браузера - JavaScript / jQuery

Спробуйте це рішення. Запускається лише після завантаження сторінки, а потім під час попереднього визначення розміру вікна 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();
            });

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

Як приклад, як деякі з ваших правил CSS, у вас можуть бути такі:

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

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

Використовуй це:

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

Ви можете зв'язати, resizeвикористовуючи .resize()та запустивши свій код, коли розмір браузера змінено. Вам також потрібно додати elseумову до ifзаяви, щоб ваші значення css перемикали старе та нове, а не просто встановлювали нове.