jQuery lors du redimensionnement de la fenêtre

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?

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é?

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

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

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

Donnez un nom à votre fonction anonyme, puis:

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

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

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

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

Utilisez ceci:

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

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.