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

Как я могу остановить мой код изменения размера от выполнения так часто !?

Это первая проблема, которую вы заметите при привязке к изменению размера. Код изменения размера называется LOT, когда пользователь вручную изменяет размер браузера, и может показаться довольно неудобным.

Чтобы ограничить частоту вызова кода изменения размера, вы можете использовать методы debounce или throttle из библиотек подчеркивания и нижней черты .

• debounceвыполнит ваш код изменения размера X через количество миллисекунд после события LAST resize. Это идеально, если вы хотите вызывать код изменения размера только один раз, после того как пользователь завершит изменение размера браузера. Это хорошо для обновления графиков, диаграмм и макетов, которые могут быть дорогими для обновления каждого отдельного события изменения размера.
• throttleбудет выполнять ваш код изменения размера каждые X миллисекунд. Это «душит», как часто код вызывается. Это не так часто используется с событиями изменения размера, но об этом стоит знать.

Если у вас нет подчеркивания или нижней черты, вы можете реализовать подобное решение самостоятельно: JavaScript / JQuery: $ (window) .resize, как запустить ПОСЛЕ изменения размера?

Переместите свой 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 переключали старое и новое, а не просто устанавливали новое.