jQuery bei Fenstergröße ändern

Ich habe den folgenden JQuery-Code:

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

Das einzige Problem ist, dass dies nur funktioniert, wenn der Browser zum ersten Mal geladen wird. Ich möchte containerHeightauch überprüft werden, wenn die Größe des Fensters geändert wird.

Irgendwelche Ideen?

Hier ist ein Beispiel für die Verwendung von jQuery, Javascript und CSS zur Behandlung von Größenänderungsereignissen.
(CSS, wenn Sie die beste Wahl sind, wenn Sie nur die Größe ändern (Medienabfragen))
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) { /* ... */ }
});

Wie kann ich verhindern, dass mein Größenänderungscode so oft ausgeführt wird?

Dies ist das erste Problem, das Sie beim Binden zur Größenänderung bemerken werden. Der Größenänderungscode wird als LOT bezeichnet, wenn der Benutzer die Größe des Browsers manuell ändert, und kann sich ziemlich nervös anfühlen.

Um zu begrenzen, wie oft Ihr Größenänderungscode aufgerufen wird, können Sie die Debounce- oder Throttle- Methoden aus den Unterstrich- und Lowdash- Bibliotheken verwenden.

• debounceführt Ihren Größenänderungscode nur X Millisekunden nach dem letzten Größenänderungsereignis aus. Dies ist ideal, wenn Sie Ihren Größenänderungscode nur einmal aufrufen möchten, nachdem der Benutzer die Größe des Browsers geändert hat. Es ist gut zum Aktualisieren von Grafiken, Diagrammen und Layouts geeignet, deren Aktualisierung jedes einzelnen Größenänderungsereignisses teuer sein kann.
• throttleführt Ihren Größenänderungscode nur alle X Millisekunden aus. Es "drosselt", wie oft der Code aufgerufen wird. Dies wird bei Größenänderungsereignissen nicht so oft verwendet, aber es lohnt sich, sich dessen bewusst zu sein.

Wenn Sie keinen Unterstrich oder Lowdash haben, können Sie eine ähnliche Lösung selbst implementieren: JavaScript / JQuery: $ (Fenster) .resize Wie wird nach Abschluss der Größenänderung ausgelöst?

Verschieben Sie Ihr Javascript in eine Funktion und binden Sie diese Funktion an die Fenstergröße.

$(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 verfügt über einen Ereignishandler für die Größenänderung, den Sie an das Fenster anhängen können: .resize () . Also, wenn Sie sagen$(window).resize(function(){/* YOUR CODE HERE */}) eingeben, wird Ihr Code jedes Mal ausgeführt die Fenstergröße geändert wird.

Sie möchten den Code also nach dem Laden der ersten Seite und bei jeder Größenänderung des Fensters ausführen. Daher sollten Sie den Code in eine eigene Funktion ziehen und diese Funktion in beiden Fällen ausführen.

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

Siehe: Browserübergreifendes Fenster Größenänderungsereignis - JavaScript / jQuery

Versuchen Sie diese Lösung. Wird nur ausgelöst, sobald die Seite geladen wurde, und dann während der Fenstergröße bei vordefinierter Größe 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;
    });
});

Geben Sie Ihrer anonymen Funktion einen Namen und dann:

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

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

kann es auch verwenden

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

Dies führt dazu, dass Ihr Handler für die Größenänderung beim Ändern der Fenstergröße und beim Bereitstellen von Dokumenten ausgelöst wird. Natürlich können Sie Ihren Größenänderungshandler auch außerhalb des dokumentenfertigen Handlers anhängen, wenn Sie möchten.trigger('resize') stattdessen beim Laden der Seite ausgeführt werden .

AKTUALISIEREN : Hier ist eine weitere Option, wenn Sie keine anderen Bibliotheken von Drittanbietern verwenden möchten.

Diese Technik fügt Ihrem Zielelement eine bestimmte Klasse hinzu, sodass Sie den Vorteil haben, das Styling nur über CSS zu steuern (und Inline-Styling zu vermeiden).

Außerdem wird sichergestellt, dass die Klasse nur hinzugefügt oder entfernt wird, wenn der tatsächliche Schwellenwert ausgelöst wird, und nicht bei jeder Größenänderung. Es wird nur an einem Schwellenwert ausgelöst : Wenn sich die Höhe von <= 818 auf> 819 oder umgekehrt ändert und nicht mehrmals in jeder Region. Es geht nicht um eine Änderung der Breite .

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

Als Beispiel haben Sie möglicherweise einige Ihrer CSS-Regeln:

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

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

Benutze das:

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

Sie können resizemit .resize()Ihrem Code binden und ihn ausführen, wenn die Größe des Browsers geändert wird. Sie müssen elseIhrer ifAnweisung auch eine Bedingung hinzufügen , damit Ihre CSS-Werte die alten und die neuen umschalten, anstatt nur die neuen festzulegen.