web-dev-qa-db-fra.com

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 lors du premier chargement du navigateur. Je souhaite également que containerHeight soit également vérifié lors du redimensionnement de la fenêtre.

Des idées?

jqueryhtmlcss
174
ediblecode

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 des choses en redimensionnant (requêtes multimédia))
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 lorsqu’il s’agit de redimensionner. Le code de redimensionnement est appelé BEAUCOUP lorsque l'utilisateur redimensionne manuellement le navigateur et peut se sentir très janky.

Pour limiter la fréquence à laquelle votre code de redimensionnement est appelé, vous pouvez utiliser les méthodes debounce ou accélérateur de soulignement & lowdash = bibliothèques.

  • debounce n'exécutera votre code de redimensionnement que X nombre de millisecondes après l'événement de dernier redimensionnement. C'est idéal lorsque vous ne souhaitez appeler votre code de redimensionnement qu'une fois, après que l'utilisateur a terminé le redimensionnement du navigateur. C'est bon pour la mise à jour des graphiques, des graphiques et des mises en page qui peuvent coûter cher mettre à jour chaque événement de redimensionnement.
  • throttle n'exécutera votre code de redimensionnement que toutes les X millisecondes. Il "étrangle" combien de fois le code est appelé. Ce n'est pas utilisé aussi souvent avec les événements de redimensionnement, mais il vaut la peine d'être au courant.

Si vous n'avez pas de tiret bas ou lowdash, vous pouvez implémenter vous-même une solution similaire: JavaScript/JQuery: $ (window) .resize comment se déclencher APRÈS que le redimensionnement soit terminé?

323
Cory Danielson

Déplacez votre javascript dans une fonction, puis liez-la 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'
        });
    }
}
55
Matthew Darnell

jQuery a un gestionnaire d'événements de redimensionnement que vous pouvez associer à 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 sera 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 l'exécuter 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: événement de redimensionnement de la fenêtre multi-navigateur - JavaScript/jQuery

10
Adam

Essayez cette solution. Ne se déclenche qu'une fois la page chargée, puis redimensionnée au moment prédéfini de la fenêtre 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;
    });
});
8
vitro

Donnez un nom à votre fonction anonyme, puis:

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

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

4
gpasci

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
hdf54d56
function myResizeFunction() {
  ...
}

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

Cela entraînera le déclenchement de votre gestionnaire de redimensionnement sur le redimensionnement de la fenêtre et sur le document prêt. Bien sûr, vous pouvez attacher votre gestionnaire de redimensionnement en dehors du gestionnaire de document prêt si vous souhaitez que .trigger('resize') soit exécuté au chargement de la page.

UPDATE: 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, ce qui vous permet de contrôler le style uniquement via CSS (et d'éviter les styles 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 tirera à un point de seuil uniquement: lorsque la hauteur passe de <= 818 à> 819 ou inversement et non plusieurs fois dans chaque région. Cela ne concerne aucune modification de width .

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

Par exemple, vous pourriez avoir les règles suivantes comme certaines de vos règles CSS:

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

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

Utilisez ceci:

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

Vous pouvez lier resize en utilisant .resize() et exécuter votre code lorsque le navigateur est redimensionné. Vous devez également ajouter une condition else à votre instruction if afin que vos valeurs css basculent entre l’ancien et le nouveau, plutôt que de définir le nouveau.

1
Billy Moon