JQuery при изменении размера окна

Ответ 1

Вот пример использования 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 из underscore и lowdash.

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

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

Ответ 2

Переместите 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'
        });
    }
}

Ответ 3

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

Ответ 4

Попробуйте это решение. Только пожары, когда страница загружается, а затем во время изменения размера окна с предопределенным 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;
    });
});

Ответ 5

Дайте вашей анонимной функции имя, а затем:

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

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

Ответ 6

также может использовать его

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

Ответ 7

Используйте это:

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

Ответ 8

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

Ответ 9

function myResizeFunction() {
  ...
}

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

Это приведет к тому, что обработчик изменения размера запускается при изменении размера окна и готовности документа. Конечно, вы можете прикрепить свой обработчик изменения размера за пределы обработчика документа, если вы хотите, чтобы .trigger('resize') выполнялся на загрузке страницы.

UPDATE. Здесь еще один вариант, если вы не хотите использовать какие-либо другие сторонние библиотеки.

Этот метод добавляет определенный класс к вашему целевому элементу, поэтому у вас есть преимущество в управлении стилем только с помощью 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;
}