Es allí cualquier manera con jQuery o JavaScript para desencadenar una función cuando el usuario termina de cambiar el tamaño de la ventana del navegador?

En otros términos:

  1. Puedo detectar mouse hasta el evento cuando el usuario es el tamaño de la ventana del navegador? De otro modo:
  2. Puedo detectar cuando un cambio de tamaño de ventana de la operación está terminada?

Estoy actualmente sólo es capaz de desencadenar un evento cuando el usuario comienza a cambiar el tamaño de la ventana con jQuery

  • Hay una y jQuery no jQuery solución aquí: github.com/louisremi/jquery-smartresize
  • hermoso solución para jquery-smartresize rebotada de eventos!
  • no hay necesidad de utilizar un plugin de jQuery cuando todo esto se puede hacer en JavaScript con bastante facilidad
InformationsquelleAutor aneuryzm | 2010-06-08

3 Comentarios

  1. 232

    Puede utilizar .resize() para obtener cada vez que la anchura/altura de hecho cambia, como este:

    $(window).resize(function() {
      //resize just happened, pixels changed
    });

    Usted puede ver una demo aquí, toma la nueva altura/anchura de los valores y los actualiza en la página para que usted vea. Recuerde que el evento no realmente inicio o final, simplemente «sucede» cuando un cambio de tamaño se produce…no hay nada que decir otro no va a suceder.


    Edición: Por los comentarios parece que quieres algo como un «fin» del evento, la solución que encontró hace esto, con un par de excepciones (no se puede distinguir entre un ratón y una pausa en un cross-browser, el mismo para una final vs un pausa). Usted puede crear que el evento aunque, para hacerlo un poco más claro, como este:

    $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
        }, 500);
    });

    Usted podría tener este es un archivo de base en algún lugar, cualquier cosa que quieras hacer…entonces usted puede unirse a la nueva resizeEnd caso de que estés de disparo, como este:

    $(window).bind('resizeEnd', function() {
        //do something, window hasn't changed size in 500ms
    });

    Usted puede ver una demo de este enfoque aquí

    • Depende del navegador, cuándo y cómo muchos de los eventos de cambio de tamaño se despidió: quirksmode.org/dom/events/resize.html
    • No estoy seguro de cómo es exacto que la página es más…abrir la demo que he publicado en el más reciente de Firefox, disparando cada vez que el tamaño de cambios aquí. No tengo la Ópera a la prueba, puede todavía ser diferentes, pero son al menos más coherente que quirksmode sugiere, te voy a enviar una nota este de las necesidades de actualización.
    • Sí, la quirksmode página sólo cubre los FF hasta el 3 de.1b2 – pero ese tipo de espectáculos, de los que depende el navegador…
    • Aquí el punto es que quiero saber cuando cambiar el tamaño de una termina y no cuando se inicia. En lugar de eso sólo es activa cuando se produce, y lo que es peor es que el evento se dispara varias veces en lugar de una vez.
    • Estoy completamente de acuerdo en que es definitivamente algo a tener en cuenta, sólo señalar que para otros no tomar esa página como un 100% de exactitud en el momento, voy a enviar una nota a ppk a ver si le voy a echar un vistazo y actualización cuando llega el tiempo.
    • Es «cambiar de tamaño» de todos los tiempos, sin embargo, el tamaño realmente ha cambiado. Si desea cambiar el tamaño de evento que usted tendrá que usar un temporizador, de modo que se espera una cantidad de tiempo especificado antes de su cocción, y borra/restablece si otro evento que ocurre entre si, que es lo que está después…no hay incorporado un evento como el que usted describe. Por ejemplo mousemove no se dispara cuando el ratón se detiene por un minuto, que se activa cada vez que el cursor cambia de posición.
    • He encontrado una solución aquí: stackoverflow.com/questions/277759/…
    • Esa es la exacto enfoque que he mencionado en mi último comentario 🙂 Nota pensamiento es sólo suavizar el mismo problema, si hace una pausa durante la duración del tiempo de espera es todavía incendio utilizando el tiempo de espera así…no se puede asegurar que el usuario no cambiar el tamaño de nuevo, por lo que como he mencionado antes, no hay una «final» del evento.
    • sí, estoy de ver no es perfecto, pero sigue siendo bueno
    • En Windows incluso depende de la condición de «mostrar el contenido de la ventana mientras se mueve».
    • Sólo quiero caer y dice que esto también se activa cuando el usuario hace zoom en la página en dispositivos móviles.
    • de la ventana.addEventListener(‘resize’, function(){}, true);
    • Tuve que upvote para lo útil que de la información. Puedo hacer cosas muy atractivas, ahora que sé que.

  2. 2

    Esto puede lograrse con la onresize propiedad de la GlobalEventHandlers interfaz en JavaScript, por la asignación de una función a la onresize de la propiedad, así:

    window.onresize = functionRef;

    El siguiente fragmento de código muestra esta, por el registro de la consola el innerWidth y innerHeight de la ventana cada vez que se cambia de tamaño. (El evento resize del fuego, después de que la ventana ha sido redimensionada)

    JS:

    function resize() {
      console.log("height: ", window.innerHeight, "px");
      console.log("width: ", window.innerWidth, "px");
    }
    
    window.onresize = resize;

    HTML:

    <p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

  3. 0

    Otra forma de hacer esto, sólo el uso de javascript sería este:

    window.addEventListener('resize', functionName);

    Se activa cada vez que el tamaño de cambios, como la otra respuesta.

    functionName es el nombre de la función que se ejecuta cuando la ventana cambia de tamaño (los corchetes en la final no son necesarias)

Dejar respuesta

Please enter your comment!
Please enter your name here