jQuery przy zmianie rozmiaru okna

Mam następujący kod 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'
        });
    }
});

Jedyny problem polega na tym, że działa to tylko przy pierwszym ładowaniu przeglądarki. Czy chcę containerHeightbyć sprawdzany także podczas zmiany rozmiaru okna?

Jakieś pomysły?

Oto przykład użycia jQuery, javascript i css do obsługi zdarzeń zmiany rozmiaru.
(css, jeśli najlepszym rozwiązaniem jest stylizacja przy zmianie rozmiaru (zapytania mediów))
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) { /* ... */ }
});

Jak mogę tak często nie wykonywać kodu zmiany rozmiaru !?

Jest to pierwszy problem, który zauważysz podczas wiązania w celu zmiany rozmiaru. Kod zmiany rozmiaru nazywa się LOT, gdy użytkownik ręcznie zmienia rozmiar przeglądarki i może czuć się dość rozzłoszczony.

Aby ograniczyć, jak często nazywany jest kod zmiany rozmiaru, można użyć zwłoki czasowej lub przepustnicy metody z podkreśleniem & lowdash bibliotek.

• debouncewykona kod zmiany rozmiaru X liczbę milisekund po zdarzeniu LAST resize. Jest to idealne rozwiązanie, gdy chcesz wywołać swój kod zmiany rozmiaru tylko raz, po zakończeniu zmiany rozmiaru przeglądarki. Jest dobry do aktualizacji wykresów, wykresów i układów, których aktualizacja każdego pojedynczego zdarzenia może być kosztowna.
• throttlewykona kod zmiany rozmiaru tylko co X milisekund. „Ogranicza” częstotliwość wywoływania kodu. Nie jest to często używane w przypadku zdarzeń zmiany rozmiaru, ale warto o tym pamiętać.

Jeśli nie masz podkreślenia lub ograniczenia, możesz samodzielnie zaimplementować podobne rozwiązanie: JavaScript / JQuery: $ (okno) .resize jak strzelać PO zakończeniu zmiany rozmiaru?

Przenieś javascript do funkcji, a następnie powiąż tę funkcję ze zmianą rozmiaru okna.

$(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 ma moduł obsługi zdarzeń zmiany rozmiaru, który można dołączyć do okna, .resize () . Tak więc, jeśli wstawisz, $(window).resize(function(){/* YOUR CODE HERE */})twój kod będzie uruchamiany przy każdej zmianie rozmiaru okna.

Tak więc chcesz uruchomić kod po załadowaniu pierwszej strony i po zmianie rozmiaru okna. Dlatego należy pobrać kod do własnej funkcji i uruchomić tę funkcję w obu instancjach.

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

Zobacz: Zdarzenie zmiany rozmiaru okna przeglądarki - JavaScript / jQuery

Wypróbuj to rozwiązanie. Uruchamia się tylko po załadowaniu strony, a następnie podczas zmiany rozmiaru okna we wstępnie zdefiniowanym 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;
    });
});

Nadaj swojej anonimowej funkcji nazwę, a następnie:

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

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

też mogę z tego skorzystać

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

Spowoduje to, że moduł obsługi zmiany rozmiaru wyzwoli przy zmianie rozmiaru okna i przygotowaniu dokumentu. Oczywiście możesz dołączyć moduł zmiany rozmiaru poza moduł obsługi dokumentów, jeśli .trigger('resize')zamiast tego chcesz uruchomić ładowanie strony.

AKTUALIZACJA : Oto kolejna opcja, jeśli nie chcesz korzystać z bibliotek innych firm.

Ta technika dodaje określoną klasę do elementu docelowego, dzięki czemu masz kontrolę nad stylizacją tylko za pomocą CSS (i unikając stylizacji wbudowanej).

Zapewnia również, że klasa jest dodawana lub usuwana tylko wtedy, gdy wyzwalany jest rzeczywisty punkt progowy, a nie przy każdej zmianie rozmiaru. Będzie strzelał tylko w jednym punkcie progowym: gdy wysokość zmieni się z <= 818 na> 819 lub odwrotnie i nie wiele razy w obrębie każdego regionu. Nie dotyczy żadnej zmiany szerokości .

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

Na przykład możesz mieć następujące zasady CSS:

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

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

Użyj tego:

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

Możesz powiązać resizeza pomocą .resize()i uruchomić swój kod, gdy rozmiar przeglądarki jest zmieniony. Musisz także dodać elsewarunek do swojej ifinstrukcji, aby wartości css przełączały stare i nowe, zamiast tylko ustawiać nowe.