jQuery en el cambio de tamaño de la ventana

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

El único problema es que esto solo funciona cuando el navegador se carga por primera vez, quiero containerHeight también que se verifique cuando cambien el tamaño de la ventana?

¿Algunas ideas?

Aquí hay un ejemplo usando jQuery, javascript y css para manejar eventos de cambio de tamaño.
(css si es su mejor apuesta si solo está estilizando cosas al cambiar el tamaño (consultas de medios))
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) { /* ... */ }
});

¿Cómo evito que mi código de cambio de tamaño se ejecute tan a menudo?

Este es el primer problema que notará al vincular para cambiar el tamaño. El código de cambio de tamaño se llama MUCHO cuando el usuario cambia el tamaño del navegador manualmente, y puede sentirse bastante extraño.

Para limitar la frecuencia con la que se llama a su código de cambio de tamaño, puede usar los métodos antirrebote o acelerador desde el subrayado y lowdash bibliotecas de .

• debouncesolo ejecutará su código de cambio de tamaño X número de milisegundos después del ÚLTIMO evento de cambio de tamaño. Esto es ideal cuando solo desea llamar a su código de cambio de tamaño una vez, después de que el usuario haya terminado de cambiar el tamaño del navegador. Es bueno para actualizar gráficos, cuadros y diseños que pueden ser costosos para actualizar cada evento de cambio de tamaño.
• throttlesolo ejecutará su código de cambio de tamaño cada X número de milisegundos. Se "acelera" con qué frecuencia se llama el código. Esto no se usa con tanta frecuencia con los eventos de cambio de tamaño, pero vale la pena tenerlo en cuenta.

Si no tiene subrayado o lowdash, puede implementar una solución similar usted mismo: JavaScript / JQuery: $ (ventana). ¿Cambiar el tamaño de cómo DESPUÉS de completar el cambio de tamaño?

Mueva su javascript a una función y luego vincule esa función para cambiar el tamaño de la ventana.

$(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 tiene un controlador de eventos de cambio de tamaño que puede adjuntar a la ventana, .resize () . Por lo tanto, si coloca$(window).resize(function(){/* YOUR CODE HERE */})su código, se ejecutará cada vez que se cambie el tamaño de la ventana.

Entonces, lo que desea es ejecutar el código después de la primera carga de la página y cada vez que se cambie el tamaño de la ventana. Por lo tanto, debe extraer el código en su propia función y ejecutar esa función en ambas instancias.

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

Ver: evento de cambio de tamaño de la ventana del navegador cruzado - JavaScript / jQuery

Prueba esta solución. Solo se dispara una vez que se carga la página y luego durante el cambio de tamaño de la ventana en 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é un nombre a su función anónima y luego:

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

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

puede usarlo también

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

Esto hará que su controlador de cambio de tamaño se active al cambiar el tamaño de la ventana y al preparar el documento. Por supuesto, puede adjuntar su controlador de cambio de tamaño fuera del controlador de documentos listos si desea .trigger('resize')ejecutar la carga de la página.

ACTUALIZACIÓN : Aquí hay otra opción si no desea utilizar ninguna otra biblioteca de terceros.

Esta técnica agrega una clase específica a su elemento de destino para que tenga la ventaja de controlar el estilo solo a través de CSS (y evitar el estilo en línea).

También garantiza que la clase solo se agregue o elimine cuando se active el punto de umbral real y no en cada cambio de tamaño. Se disparará solo en un punto de umbral: cuando la altura cambia de <= 818 a> 819 o viceversa y no varias veces dentro de cada región. No le preocupa ningún cambio de ancho .

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 ejemplo, puede tener lo siguiente como algunas de sus reglas CSS:

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

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

Utilizar este:

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

Puedes unirte resizeusando.resize() y ejecutar su código cuando se cambia el tamaño del navegador. También debe agregar una elsecondición a su ifdeclaración para que sus valores CSS alternen entre lo antiguo y lo nuevo, en lugar de simplemente establecer lo nuevo.