jQuery no redimensionamento da janela

Eu tenho o seguinte código 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'
        });
    }
});

O único problema é que isso só funciona quando o navegador é carregado pela primeira vez. Quero containerHeighttambém ser verificado quando eles estão redimensionando a janela?

Alguma ideia?

Aqui está um exemplo usando jQuery, javascript e css para manipular eventos de redimensionamento.
(css se sua melhor aposta, se você está apenas estilizando coisas no redimensionamento (consultas de mídia))
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) { /* ... */ }
});

Como faço para impedir que meu código de redimensionamento seja executado com tanta frequência !?

Este é o primeiro problema que você notará ao vincular o redimensionamento. O código de redimensionamento é chamado de MUITO quando o usuário está redimensionando o navegador manualmente e pode parecer bastante irregular.

Para limitar quantas vezes o seu código de redimensionamento é chamado, você pode usar o debounce ou acelerador métodos da sublinhado & lowdash bibliotecas.

• debounceexecutará apenas o código de redimensionamento X número de milissegundos após o evento de redimensionamento LAST. Isso é ideal quando você deseja chamar seu código de redimensionamento apenas uma vez, após o usuário ter redimensionado o navegador. É bom para atualizar gráficos, tabelas e layouts que podem ser caros para atualizar todos os eventos de redimensionamento.
• throttlesomente executará seu código de redimensionamento a cada número X de milissegundos. Ele "acelera" a frequência com que o código é chamado. Isso não é usado com frequência em eventos de redimensionamento, mas vale a pena estar ciente.

Se você não tiver sublinhado ou pouco brilho, poderá implementar uma solução semelhante: JavaScript / JQuery: $ (window). Redimensionar como acionar APÓS o redimensionamento ser concluído?

Mova seu javascript para uma função e vincule-a ao redimensionamento da janela.

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

O jQuery possui um manipulador de eventos de redimensionamento que pode ser anexado à janela .resize () . Portanto, se você colocar $(window).resize(function(){/* YOUR CODE HERE */}), seu código será executado sempre que a janela for redimensionada.

Portanto, o que você deseja é executar o código após o carregamento da primeira página e sempre que a janela for redimensionada. Portanto, você deve colocar o código em sua própria função e executá-la nas duas instâncias.

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

Consulte: Evento de redimensionamento da janela entre navegadores - JavaScript / jQuery

Experimente esta solução. É acionado apenas quando a página é carregada e, em seguida, durante o redimensionamento da janela, no predefinido 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;
    });
});

Dê um nome à sua função anônima e, em seguida:

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

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

pode usá-lo também

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

Isso fará com que o manipulador de redimensionamento seja acionado no redimensionamento da janela e no documento pronto. Obviamente, você pode anexar seu manipulador de redimensionamento fora do manipulador de documentos, se desejar .trigger('resize')executar o carregamento da página.

ATUALIZAR : Aqui está outra opção, se você não quiser usar outras bibliotecas de terceiros.

Essa técnica adiciona uma classe específica ao seu elemento de destino, para que você tenha a vantagem de controlar o estilo apenas por CSS (e evitar o estilo embutido).

Também garante que a classe seja adicionada ou removida apenas quando o ponto de limite real for acionado e não em todo e qualquer redimensionamento. Ele será acionado apenas em um ponto limite: quando a altura mudar de <= 818 para> 819 ou vice-versa e não várias vezes em cada região. Não está preocupado com nenhuma alteração na largura .

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

Como exemplo, você pode ter o seguinte, como algumas de suas regras CSS:

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

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

Usa isto:

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

Você pode vincular resizeusando .resize()e executar seu código quando o navegador é redimensionado. Você também deve adicionar uma elsecondição à sua ifinstrução para que seus valores css alternem o antigo e o novo, em vez de apenas definir o novo.