Tengo una pregunta acerca de un sitio en el que estoy trabajando sobre la detección cuando la ventana cambia de tamaño. Sé que esto ha sido discutido previamente y he leído muchos de los debates y no podía llegar a trabajar. Estoy aprendiendo 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')
    }
 });

Esto es lo que tengo hasta ahora y funciona bien, pero sólo en la carga inicial. Me pregunto si alguien me puede ayudar a ajustar esto para que funcionen de forma dinámica para que yo pudiera ver los cambios si yo fuera a cambiar manualmente el tamaño de mi navegador, sin actualizar?

Gracias!

InformationsquelleAutor Jgammel | 2013-02-25

2 Comentarios

  1. 7

    Puede volver a llamar a esta función mediante .resize().

    por ejemplo,

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

    Hay tal vez de otra manera mejor de todo esto, pero esta es la opción que yo sé acerca de.

    • menor punto, usted ha perdido la ); al final de la $(window).función de cambiar el tamaño.
    • Así lo hice 🙂 … también se perdió en el $(fun.. demasiado… han añadido a la respuesta
    • También era necesario .removeClass(OLDCLASS) cada vez que
  2. 1

    Por el momento, este es un auto de llamadas anónimas función para que se ejecute inmediatamente, tan pronto como se carga la página (por lo tanto, se ejecutará una sola vez).

    Para que se ejecute cada vez que windows se cambia el tamaño que usted necesita para registrar el evento de cambio de tamaño en la ventana (la documentación completa está aquí http://api.jquery.com/resize/).

    Si la actualización de la línea:

    $(function() {

    así que se lee

    $(window).cambiar el tamaño(function() {

    será llamado cada vez que la ventana del navegador cambia de tamaño.

    • Tienes razón, pero él todavía tiene la $(function(){ por lo que se ejecuta cuando la página se carga por primera vez. Acabo de tener resize(), sólo se ejecutaría la función cuando la ventana cambia de tamaño.
    • de hecho. Que es cierto.
    • Gracias a ambos por las respuestas. Pido disculpas, sé que probablemente estoy haciendo algo realmente estúpido; pero, puedo actualizar mi línea como usted dice y que tiene que ajustar cuando me la escala de la página hacia abajo – pero me rompen cuando trato de agregar la función de la espalda por lo que todavía refresca en la primera carga..?
    • Cuando usted dice que se rompe, ¿qué sucede?
    • Voy a perder el añadido de las clases y ya no escalas como fue cuando me acaba de editar la línea como usted sugiere.
    • Si ha intentado utilizar Viewtech la solución más arriba se ha perdido la ); al final de la $(window).resize() función
    • Gracias – parece estar funcionando ahora. Una cosa extraña, y esto no es un gran problema en absoluto, más por mi propia curiosidad. Funciona bien al actualizar o al arrastrar manualmente el navegador de tamaño, pero si alguna vez intenta arrastrar manualmente o agrandar la ventana del navegador los cambios no se registran. Cualquier pensamiento sobre la razón por la que no sólo de trabajo de tamaño hacia abajo? Gracias por toda su ayuda!
    • Sólo tendrá que añadir en las clases, no retire nunca las clases existentes. Si utiliza cualquiera de firebug o las herramientas para desarrolladores de chrome para inspeccionar los elementos que va a modificar, ellos tendrán muchas de estas clases presentes. Usted tendrá que utilizar .removeClass() para desmontar las clases extra que se addding.
    • Ahhha. Muchas gracias por tu ayuda en este tema. Entiendo ahora.

Dejar respuesta

Please enter your comment!
Please enter your name here