jQuery lors du redimensionnement de la fenêtre

196

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 containerHeightégalement être vérifié lors du redimensionnement de la fenêtre?

Des idées?

jquery  html  css 
— ediblecode
source
47
$(window).resize(function(){...})
— Rob W

Réponses:

366

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 ne faites que styliser les choses sur le redimensionnement (requêtes multimédias))
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 de redimensionnement de s'exécuter si souvent !?

C'est le premier problème que vous remarquerez lors de la liaison pour redimensionner. Le code de redimensionnement est appelé BEAUCOUP lorsque l'utilisateur redimensionne manuellement le navigateur et peut se sentir assez janky.

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

  • debouncen'exécutera votre code de redimensionnement que X nombre de millisecondes après le DERNIER événement de redimensionnement. C'est idéal lorsque vous ne souhaitez appeler votre code de redimensionnement qu'une seule fois, une fois que l'utilisateur a terminé de redimensionner le navigateur. C'est bon pour mettre à jour des graphiques, des graphiques et des mises en page qui peuvent coûter cher à mettre à jour chaque événement de redimensionnement.
  • throttlen'exécutera votre code de redimensionnement que toutes les X millisecondes. Il "limite" la fréquence à laquelle le code est appelé. Cela n'est pas utilisé aussi souvent avec les événements de redimensionnement, mais cela vaut la peine d'en être conscient.

Si vous n'avez pas de trait de soulignement ou de lowdash, vous pouvez implémenter vous-même une solution similaire: JavaScript / JQuery: $ (window) .resize comment déclencher une fois le redimensionnement terminé?

— Cory Danielson
source
9
Thx pour une excellente réponse; et pour les informations anti-rebond / accélérateur; et pour le lien vers la solution auto-roll.
— crashwap
58

Déplacez votre javascript dans une fonction, puis liez cette fonction au redimensionnement de 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'
        });
    }
}
— Matthew Darnell
source
11

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

Donc, ce que vous voulez, c'est exécuter le code après le chargement de la première page et chaque fois que la fenêtre est redimensionnée. Par conséquent, vous devez extraire le code dans sa propre fonction et exécuter cette fonction dans les deux instances.

// 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: Événement de redimensionnement de la fenêtre inter-navigateurs - JavaScript / jQuery

— Adam
source
4
... ou vous pouvez réécrire le gestionnaire de document prêt comme$(function() { $(window).resize(positionFooter).triggerHandler('resize'); });
— WynandB
10

Essayez cette solution. Se déclenche uniquement une fois la page chargée, puis lors du redimensionnement de la fenêtre au niveau prédéfini 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;
    });
});
— vitro
source
Cela fonctionne pour moi, merci. Mais pouvez-vous s'il vous plaît expliquer pourquoi votre "var resizer = function ()" est réellement déclenché? Dans ma compréhension, vous ne définissez la variable doResize que dans l'événement $ (window) .resize mais n'appelez pas la fonction elle-même.
— Alexander
Il y a un appel à la fonction: resizer();juste après le réglage de l'intervalle. Et comme le doResizeest défini sur true, il est déclenché lorsque le document est prêt.
— vitro
Oui, pour moi, il est compréhensible que la fonction soit exécutée avec document.ready. Mais je ne peux pas comprendre pourquoi la fonction est également exécutée après le redimensionnement, car à ma connaissance, seule la variable est définie. Pour moi, cela n'aurait de sens qu'après le redimensionnement, le document.ready est à nouveau déclenché, de sorte que la fonction soit redémarrée (mais cela ne devrait pas être le cas?)
— Alexander
Il existe un jeu d'intervalle qui vérifie à plusieurs reprises resizeDelaysi la doResizevariable est définie sur true. Et doResizeest également réglé truesur $(window).resize(). Donc , vous redimensionnez la fenêtre, que les ensembles doResizeà trueet lors de la prochaine vérification resizer()fonction est appelée.
— vitro
3

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();
            });
— hdf54d56
source
1
Veuillez expliquer ce que le code fait un peu plus. Vous ne proposez pas vraiment beaucoup de réponse.
— cereallarceny
3 
function myResizeFunction() {
  ...
}

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

Cela entraînera le déclenchement de votre gestionnaire de redimensionnement lors du redimensionnement de la fenêtre et lorsque le document sera prêt. Bien sûr, vous pouvez attacher votre gestionnaire de redimensionnement en dehors du gestionnaire de document prêt si vous souhaitez .trigger('resize')exécuter à la place le chargement de la page.

MISE À JOUR : Voici une autre option si vous ne souhaitez pas utiliser d'autres bibliothèques tierces.

Cette technique ajoute une classe spécifique à votre élément cible afin que vous ayez l'avantage de contrôler le style via CSS uniquement (et d'éviter le style en ligne).

Cela garantit également que la classe n'est ajoutée ou supprimée que lorsque le point de seuil réel est déclenché et non à chaque redimensionnement. Il se déclenchera à un seul point de seuil: lorsque la hauteur passe de <= 818 à> 819 ou vice versa et non plusieurs fois dans chaque région. Cela ne concerne aucun changement de 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;
}
— WynandB
source
2

Utilisez ceci:

window.onresize = function(event) {
    ...
}
— vivek
source
1

Vous pouvez lier en resizeutilisant .resize()et exécuter votre code lorsque le navigateur est redimensionné. Vous devez également ajouter une elsecondition à votre ifinstruction afin que vos valeurs css basculent entre l'ancien et le nouveau, plutôt que de simplement définir le nouveau.

— Billy Moon
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.