jQuery bij formaat wijzigen van venster

Ik heb de volgende 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'
        });
    }
});

Het enige probleem is dat dit alleen werkt wanneer de browser voor het eerst wordt geladen. Ik wil dat containerHeightook wordt aangevinkt wanneer ze het formaat van het venster wijzigen?

Enig idee?

Antwoord 1, autoriteit 100%

Hier is een voorbeeld waarin jQuery, javascript en css worden gebruikt om resize-gebeurtenissen af ​​te handelen.

(css als je het beste kunt doen als je dingen alleen maar stileert op formaat wijzigen (mediaquery’s))
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) { /* ... */ }
});

Hoe voorkom ik dat mijn resize-code zo vaak wordt uitgevoerd!?

Dit is het eerste probleem dat u opmerkt bij het binden om het formaat te wijzigen. De resize-code wordt VEEL genoemd wanneer de gebruiker de browser handmatig aanpast, en kan behoorlijk janky aanvoelen.

Om te beperken hoe vaak je code voor het wijzigen van de grootte wordt aangeroepen, kun je de debounceof throttle-methoden uit de underscore& lowdash-bibliotheken.

• debouncevoert uw resize-code X-aantal milliseconden alleen uit na de LAATSTE resize-gebeurtenis. Dit is ideaal wanneer u uw resize-code slechts één keer wilt aanroepen, nadat de gebruiker klaar is met het wijzigen van het formaat van de browser. Het is goed voor het bijwerken van grafieken, diagrammen en lay-outs die duur kunnen zijn om elke afzonderlijke gebeurtenis voor het wijzigen van de grootte bij te werken.
• throttlevoert uw resize-code slechts om de X milliseconden uit. Het “smoort” hoe vaak de code wordt aangeroepen. Dit wordt niet zo vaak gebruikt bij resize-evenementen, maar het is de moeite waard om er rekening mee te houden.

Als je geen underscore of lowdash hebt, kun je zelf een vergelijkbare oplossing implementeren:
JavaScript/JQuery: $(window) .resize hoe te vuren NADAT de resize is voltooid?

Antwoord 2, autoriteit 15%

Verplaats je javascript naar een functie en bind die functie vervolgens aan het formaat van het venster.

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

Antwoord 3, autoriteit 3%

Probeer deze oplossing. Wordt alleen geactiveerd zodra de pagina is geladen en vervolgens tijdens het formaat van het venster op vooraf gedefinieerde 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;
    });
});

Antwoord 4, autoriteit 3%

jQuery heeft een gebeurtenishandler voor het wijzigen van de grootte die u aan het venster kunt toevoegen, .resize(). Dus als u $(window).resize(function(){/* YOUR CODE HERE */})plaatst, wordt uw code elke keer uitgevoerd als het formaat van het venster wordt gewijzigd.

Dus u wilt de code uitvoeren nadat de eerste pagina is geladen en wanneer het formaat van het venster wordt gewijzigd. Daarom moet je de code in zijn eigen functie trekken en die functie in beide gevallen uitvoeren.

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

Zie: Cross-browser window resize event – JavaScript / jQuery

Antwoord 5

Geef uw anonieme functie een naam en dan:

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

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

Antwoord 6

function myResizeFunction() {
  ...
}
$(function() {
  $(window).resize(myResizeFunction).trigger('resize');
});

Dit zal ervoor zorgen dat uw resize-handler wordt geactiveerd bij het wijzigen van de grootte van het venster en bij het gereed zijn van het document. Natuurlijk kunt u uw resize-handler toevoegen buiten de document-ready-handler als u wilt dat .trigger('resize')in plaats daarvan wordt uitgevoerd bij het laden van de pagina.

UPDATE: hier is nog een optie als u geen gebruik wilt maken van andere bibliotheken van derden.

Deze techniek voegt een specifieke klasse toe aan uw doelelement, zodat u het voordeel heeft dat u de opmaak alleen via CSS kunt regelen (en inline opmaak vermijdt).

Het zorgt er ook voor dat de klasse alleen wordt toegevoegd of verwijderd wanneer het daadwerkelijke drempelpunt wordt geactiveerd en niet bij elke formaatwijziging. Het vuurt op slechts ééndrempelpunt: wanneer de hoogteverandert van <= 818 in > 819 of vice versa en niet meerdere keren binnen elke regio. Het houdt zich niet bezig met enige verandering in breedte.

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 voorbeeld kunt u het volgende hebben als enkele van uw CSS-regels:

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

Antwoord 7

Gebruik dit:

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

Antwoord 8

kan het ook gebruiken

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

Antwoord 9

Je kunt resizebinden met .resize()en voer uw code uit wanneer het formaat van de browser wordt gewijzigd. U moet ook een else-voorwaarde toevoegen aan uw if-instructie, zodat uw CSS-waarden tussen oud en nieuw wisselen, in plaats van alleen het nieuwe in te stellen.