Cómo verificar cuando un div se redimensiona, usando Javascript o Jquery

Question

Tengo una aplicación web en medio de wireframing, pero me he encontrado con un problema que requiere una solución técnica antes de poder solidificar este modelo; que ser:. (a. div con un máximo de ancho)

• Fig # 1 usuario crea nueva 'text-campo' elemento usuario entonces comienza a escribir en dicha elemento hasta que ...

• Fig. # 2 el elemento alcanza su max-anchura, el texto se reduce a una nueva imagen de fondo una 'nueva' línea y (en la forma de otro div) se crea (con la opacidad y la posición animado para el efecto) para acomodar el elemento más grande ze.

Este es un esbozo de la funcionalidad prevista (dada en este momento, no estoy seguro de cómo tener un campo de texto que se comporta como un div con ancho máximo aún) pero Tengo curiosidad acerca de cómo crear el controlador de eventos para el 2do paso; Pensé en verificar cada evento 'keydown', pero parece ineficiente ...

¿Alguien tiene algún consejo o idea para abordar algo como esto? ¡Gracias!

Answer 1

En MSIE, un onresize debería dispararse.

Answer 2

El evento 'keydown' o 'keyup' es lo primero que se le viene a la mente. Si decide hacerlo de esta manera, tendrá que comprobar el tamaño de los elementos html cada vez y compararlo con el anterior (guardar en una variable).

La manera más fácil parece ser unir un controlador al elemento html y dejarlo disparar cuando cambia el tamaño. No sé si existe tal evento, pero si ese es el camino a seguir.

(1 de tu pregunta muy descriptiva)

Answer 3

Usted podría tratar de usar la funcionalidad de transición CSS3:
http://slides.html5rocks.com/#slide42
De esta manera los elementos que desea pueden ser animados por el propio navegador.

Descargo de responsabilidad: Obviamente, esto no funciona con efectos más complicados.

Answer 4

No estoy seguro de cómo atacar el problema de ancho donde un campo de entrada mide automáticamente hasta el ancho máximo y luego se ajusta. Podría usar una fuente monoespacia dentro del campo de texto para poder usar javascript para monitorear y controlar el crecimiento de la caja horizontalmente hasta el ancho máximo.

Para acercarse a la altura del crecimiento automático, sería mejor usar un área de texto con una fila para comenzar, de modo que parezca un cuadro de entrada y luego cuando el texto se ajuste automáticamente a la siguiente fila, lo que hará. Puede verificar la altura del área de texto y verificar la altura real del área de texto, restarlas y obtendrá la altura que necesita para hacer crecer el área de texto para evitar que aparezcan las barras de desplazamiento verticales.

Lo anterior hará que las barras de desplazamiento se activen y desactiven brevemente mientras que su javascript lo hace mágico. Puede usar overflow:auto; para ocultar las barras de desplazamiento, pero entonces no sé si scrollHeight aún leerá correctamente. Necesitarás experimentar

También tome nota de mi comentario anterior sobre la configuración de un intervalo en la tecla y la comprobación de la longitud de entrada para detener la repetición de la tecla de texto.