JQuery sur l'exécution de la fenêtre de redimensionnement?

Question

J'ai le texte suivant 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'
        });
    }
});

Le seul problème est que cela ne fonctionne que lorsque le navigateur se charge tout d'abord, je tiens containerHeight également être vérifiés lorsqu'ils sont le redimensionnement de la fenêtre?

Des idées?

Answer 1

Voici un exemple d'utilisation de jQuery, javascript et css pour gérer les événements de redimensionnement.
(css si votre meilleur pari si vous êtes juste en appliquant des choses sur redimensionner (media queries))
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) { /* ... */ }
});

Comment puis-je arrêter mon code de redimensionnement de l'exécution de si souvent!?

C'est le premier problème que vous remarquerez lors de la liaison à redimensionner. Le code de redimensionnement est appelé BEAUCOUP de choses lorsque l'utilisateur est en cours de redimensionnement du navigateur manuellement, et peuvent se sentir assez janky.

Pour limiter la fréquence de votre code de redimensionnement est appelé, vous pouvez utiliser l' anti-rebond ou de gaz méthodes à partir du trait de soulignement & lowdash bibliothèques.

• debounce uniquement pour exécuter votre code de redimensionnement X nombre de millisecondes après le DERNIER événement de redimensionnement. Ce qui est idéal lorsque vous ne souhaitez appeler votre code de redimensionnement une fois, après que l'utilisateur se fait du redimensionnement du navigateur. C'est bon pour la mise à jour des diagrammes, des graphiques et mises en page qui peut être coûteux de mettre à jour à chaque événement de redimensionnement.
• throttle uniquement pour exécuter votre code de redimensionnement de toutes les X millisecondes. Il "manettes" combien de fois le code est appelé. Ce n'est pas utilisée comme souvent avec les événements de redimensionnement, mais il vaut la peine d'être conscient de.

Si vous n'avez pas de souligner ou de lowdash, vous pouvez mettre en œuvre une solution similaire vous-même: JavaScript/JQuery: $(window).redimensionner comment le feu APRÈS le redimensionnement est terminé?

Answer 2

Déplacez votre code javascript dans une fonction, puis lier cette fonction pour redimensionner la fenêtre.

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

Answer 3

jQuery a une redimensionner gestionnaire d'événement que vous pouvez attacher à la fenêtre .resize(). Donc, si vous mettez $(window).resize(function(){/* YOUR CODE HERE */}) puis votre code sera exécuté à chaque fois que la fenêtre est redimensionnée.

Donc, ce que vous voulez est d'exécuter du code après le premier chargement de la page et à chaque fois que la fenêtre est redimensionnée. Donc, vous devez tirer le code dans sa propre fonction et exécuter cette fonction dans les deux cas.

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

Voir: Croix-navigateur de la fenêtre de l'événement de redimensionnement - JavaScript / jQuery

Answer 4

Donner votre fonction anonyme un nom, puis:

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

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

Answer 5

pouvez l'utiliser aussi

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