jQuery sur la fenêtre redimensionner

j'ai le code JQuery suivant:

$(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 pour la première fois, je veux que containerHeight soit aussi vérifié quand ils redimensionnent la fenêtre?

des idées?

148
demandé sur ediblecode 2012-03-22 23:04:37

9 réponses

voici un exemple d'utilisation de jQuery, javascript et css pour gérer les événements redimensionnels.

(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 empêcher mon code redimensionné d'exécuter si souvent!?

C'est le premier problème que vous remarquerez lors de la reliure à redimensionner. Le code de redimensionnement est appelé beaucoup quand l'utilisateur redimensionne le navigateur manuellement, et peut se sentir assez dérangeant.

pour limiter la fréquence d'appel de votre code de redimensionnement, vous pouvez utiliser les méthodes debounce ou throttle des méthodes underscore & lowdash les bibliothèques.

  • debounce " n'exécutera votre code de redimensionnement Qu'un nombre X de millisecondes après le dernier événement de redimensionnement. C'est idéal lorsque vous voulez appeler votre code de redimensionnement une seule fois, après que l'Utilisateur a fini de redimensionner le navigateur. Il est bon pour la mise à jour des graphiques, des graphiques et des mises en page qui peut être coûteux de mettre à jour chaque événement de redimensionnement simple.
  • throttle n'exécutera votre code de redimensionnement que tous les X nombre de millisecondes. Il "manettes" combien de fois le code est appelé. Ceci n'est pas utilisé aussi souvent avec les événements redimensionner, mais cela vaut la peine d'être conscient.

si vous n'avez pas de underscore ou lowdash, vous pouvez implémenter une solution similaire vous-même: JavaScript / JQuery: $(window).redimensionner comment tirer une fois la redimensionnement terminée?

275
répondu Cory Danielson 2017-05-23 12:18:14

déplacez votre javascript dans une fonction et liez cette fonction à 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'
        });
    }
}
52
répondu Matthew Darnell 2012-03-22 19:06:23

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

ainsi, ce que vous voulez est d'exécuter le code après le chargement de la première 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: Cross-browser window redimensionze event-JavaScript / jQuery

8
répondu Adam 2017-05-23 11:54:41

essayez cette solution. Ne démarre qu'une fois que la page se charge, puis lors de la redimensionnement de la fenêtre à la valeur prédéfinie 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;
    });
});
6
répondu vitro 2015-09-04 08:43:32

donnez un nom à votre fonction anonyme, puis:

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

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

3
répondu gpasci 2012-03-22 19:06:54

peut 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();
            });
3
répondu hdf54d56 2012-10-20 16:46:54
function myResizeFunction() {
  ...
}

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

cela déclenchera votre gestionnaire de redimensionnement sur la fenêtre redimensionner et sur le document prêt. Bien sûr, vous pouvez joindre votre gestionnaire resize en dehors du gestionnaire de documents ready si vous voulez que .trigger('resize') s'exécute sur le chargement de page à la place.

UPDATE : voici une autre option si vous ne voulez pas utiliser d'autres bibliothèques tierces.

cette technique ajoute une classe spécifique à votre élément cible afin que vous avoir l'avantage de contrôler le style par CSS seulement (et éviter le style en ligne).

il garantit également que la classe n'est ajoutée ou supprimée que lorsque le seuil réel est déclenché et non sur chaque redimensionnement. Il ne tirera qu'au un seuil seulement: lorsque la hauteur change de <= 818 à > 819 ou vice versa et non plusieurs fois dans chaque région. Ce n'est pas concerné par tout changement dans largeur .

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

à titre d'exemple, vous pourriez avoir ce qui suit comme certaines de vos règles CSS:

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

.footer.hgte819 {
  bottom: 3px;
  left: 0;
  position: absolute;
}
3
répondu WynandB 2014-03-10 23:26:32

utilisez ceci:

window.onresize = function(event) {
    ...
}
2
répondu vivek 2012-03-22 19:08:20

vous pouvez lier resize en utilisant .resize() et exécuter votre code lorsque le navigateur est redimensionné. Vous devez aussi ajouter une condition else à votre déclaration if pour que vos valeurs css basculent l'ancienne et la nouvelle, plutôt que de simplement définir la nouvelle.

1
répondu Billy Moon 2012-03-22 19:07:40