jquery détecter la fenêtre de redimensionnement

J'ai une question sur un site que je suis en train de travailler sur le sujet de la détection lorsque la fenêtre est redimensionnée. Je sais que cela a été discuté précédemment et j'ai lu à travers de nombreuses discussions, et ne pouvaient tout simplement pas le faire fonctionner. Je suis en train d'apprendre jquery.

 $(function(){
    var viewPortWidth = $(window).width();
    if (viewPortWidth > 1900)
    {
       $('#mainbio, #footerlinks').addClass('extraWide')
    }
    else if (viewPortWidth > 1400)
    {
       $('#mainbio, #footerlinks').addClass('wide')
    }
    else if (viewPortWidth > 1000) 
    {
       $('#mainbio, #footerlinks').addClass('standard')
    }
    else if (viewPortWidth > 700)
    {
       $('#mainbio, #footerlinks, #twitter, #facebook, #flickr,   #lastfm').addClass('narrow')
    }
    else 
    {
       $('#mainbio, #footerlinks, #twitter, #facebook, #flickr, #lastfm').addClass('extraNarrow')
    }
 });

C'est ce que j'ai à ce jour et il fonctionne très bien, mais seulement sur la charge initiale. Je me demandais si quelqu'un peut m'aider à régler ce afin qu'il fonctionne de manière dynamique afin que je puisse voir les changements, si j'étais à redimensionner manuellement mon navigateur, sans rafraîchissant?

Merci!

OriginalL'auteur Jgammel | 2013-02-25

  1. 7

    Vous pouvez rappeler cette fonction à l'aide .resize().

    par exemple

    var detectViewPort = function(){
    var viewPortWidth = $(window).width();
    if (viewPortWidth > 1900)
    //...The rest of your above code.
};

$(function(){
  detectViewPort();
});

$(window).resize(function () {
   detectViewPort();
});

    Il y a peut-être un meilleur moyen de contourner cela, mais c'est l'option que je connais.

    point mineur, vous avez manqué l' ); à la fin de l' $(window).la fonction de redimensionnement.
    J'ai donc fait 🙂 ... aussi raté sur le $(fun.. trop... ont ajouté à la réponse
    Vous aussi, vous avez besoin de .removeClass(OLDCLASS) à chaque fois

    OriginalL'auteur dev

  2. 1

    Pour le moment, c'est un auto-appel anonyme de la fonction sera exécutée immédiatement dès que le chargement de la page (donc sera exécuté une fois).

    Pour le faire fonctionner, à chaque fois que windows est redimensionnée, vous devez vous inscrire à l'événement de redimensionnement de la fenêtre (la documentation complète est ici http://api.jquery.com/resize/).

    Si vous mettez à jour la ligne:

    $(function() {

    afin qu'il lit

    $(window).redimensionner(function() {

    il sera appelée à chaque fois que la fenêtre du navigateur est redimensionnée.

    Vous avez raison, mais il aurait encore besoin de la $(function(){ de sorte qu'il s'exécute lorsque la page est chargée pour la première fois. Juste après avoir resize() serait seulement l'exécution de la fonction lorsque la fenêtre est redimensionnée.
    en effet. Ce qui est vrai.
    Merci à vous deux pour les réponses. Je m'excuse, je sais que je suis probablement faire quelque chose de vraiment stupide; mais, je peux mettre à jour ma ligne comme vous le dites et ont à s'adapter quand je l'échelle de la page vers le bas - mais je le casse lorsque j'essaie d'ajouter la fonction de retour afin qu'il encore actualise sur la première charge..?
    Quand vous dites qu'il brise ce qui se passe?
    Je perds l'ajout des classes et il n'a plus les échelles comme il était quand je l'ai juste modifié la ligne comme vous l'avez suggéré.

    OriginalL'auteur Marryat