jQuery sul ridimensionamento della finestra

Ho il seguente codice 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'
        });
    }
});

L'unico problema è che funziona solo quando il browser viene caricato per la prima volta, voglio containerHeightessere controllato anche quando stanno ridimensionando la finestra?

Qualche idea?

Ecco un esempio usando jQuery, javascript e css per gestire gli eventi di ridimensionamento.
(css se la tua scommessa migliore se stai solo stilizzando le cose sul ridimensionamento (query dei media))
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) { /* ... */ }
});

Come posso interrompere l'esecuzione del mio codice di ridimensionamento così spesso !?

Questo è il primo problema che noterai quando si esegue il ridimensionamento. Il codice di ridimensionamento viene chiamato MOLTO quando l'utente sta ridimensionando manualmente il browser e può sentirsi piuttosto janky.

Per limitare la frequenza con cui viene chiamato il codice di ridimensionamento, è possibile utilizzare i metodi debounce o throttle dalle librerie underscore e lowdash .

• debounceeseguirà il tuo codice di ridimensionamento X numero di millisecondi dopo l'evento LAST ridimensionamento. Questo è l'ideale quando si desidera chiamare il codice di ridimensionamento solo una volta, dopo che l'utente ha terminato il ridimensionamento del browser. È utile per aggiornare grafici, diagrammi e layout che possono essere costosi per aggiornare ogni singolo evento di ridimensionamento.
• throttleeseguirà il codice di ridimensionamento solo ogni numero X di millisecondi. "Limita" la frequenza con cui viene chiamato il codice. Questo non viene usato spesso con eventi di ridimensionamento, ma vale la pena essere consapevoli.

Se non hai il trattino basso o il trattino basso, puoi implementare tu stesso una soluzione simile: JavaScript / JQuery: $ (finestra) .resize come attivare DOPO che il ridimensionamento sia completato?

Sposta il tuo javascript in una funzione e quindi associa tale funzione al ridimensionamento della finestra.

$(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 ha un gestore di eventi di ridimensionamento che puoi allegare alla finestra, .resize () . Quindi, se lo metti, il $(window).resize(function(){/* YOUR CODE HERE */})tuo codice verrà eseguito ogni volta che la finestra viene ridimensionata.

Quindi, quello che vuoi è eseguire il codice dopo il caricamento della prima pagina e ogni volta che la finestra viene ridimensionata. Pertanto, è necessario estrarre il codice nella propria funzione ed eseguire quella funzione in entrambi i casi.

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

Vedi: Evento di ridimensionamento della finestra tra browser - JavaScript / jQuery

Prova questa soluzione. Viene attivato solo una volta caricata la pagina e quindi durante il ridimensionamento della finestra su predefinito 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;
    });
});

Dai un nome alla tua funzione anonima, quindi:

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

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

posso usarlo anche tu

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

Ciò causerà l'attivazione del gestore di ridimensionamento sul ridimensionamento della finestra e sul documento pronto. Ovviamente, è possibile collegare il gestore di ridimensionamento al di fuori del gestore pronto documento se si desidera .trigger('resize')eseguire invece il caricamento della pagina.

AGGIORNAMENTO : ecco un'altra opzione se non si desidera utilizzare altre librerie di terze parti.

Questa tecnica aggiunge una classe specifica al tuo elemento target in modo da avere il vantaggio di controllare lo stile solo tramite CSS (ed evitare lo stile in linea).

Assicura inoltre che la classe venga aggiunta o rimossa solo quando viene attivato il punto di soglia effettivo e non su ogni ridimensionamento. Sparerà ad un solo punto di soglia: quando l' altezza cambia da <= 818 a> 819 o viceversa e non più volte all'interno di ciascuna regione. Non si tratta di alcun cambiamento di larghezza .

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

Ad esempio, potresti avere quanto segue come alcune delle tue regole CSS:

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

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

Usa questo:

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

Puoi eseguire il bind resizeutilizzando .resize()ed eseguendo il codice quando il browser viene ridimensionato. Devi anche aggiungere una elsecondizione alla tua ifdichiarazione in modo che i tuoi valori css commutino il vecchio e il nuovo, piuttosto che impostare semplicemente il nuovo.