jQuery cambiar el tamaño no trabajando en Firefox, Chrome y Safari

Question

$("#dvMyDIV").bind("resize", function(){ 
    alert("Resized"); 
}); 

o

$("#dvMyDIV").resize(function(){ 
    alert("Resized"); 
}); 

Las preguntas

1. ¿Por qué no trabajar en Firefox, Chrome y Safari?
2. ¿Se puede considerar esto un error de jQuery ya que el tamaño no se maneja para otros navegadores?
3. ¿Podría ser la única solución llamar a una función SetTimeout que comprueba el clienteHeight y clientWidth?
4. ¿Alguna solución provisional que utiliza jQuery?

Answer 1

Creo que el evento de cambio de tamaño de JavaScript solo se aplica a marcos o ventanas, no a DIV.

p. Ej. ver this page:

El controlador par onResize se utiliza para ejecutar el código especificado cada vez que un usuario o script cambia el tamaño de una ventana o marco. Esto le permite consultar el tamaño y la posición de los elementos de la ventana, restablecer dinámicamente propiedades SRC etc.

Así que si quieres para detectar cuando se cambia el tamaño de la ventana, en jQuery probablemente debería utilizar $(window).resize(function() { });

Editar : si quiere ver el tamaño de un DIV, depende de cuál sea su intención. Si está cambiando el tamaño con JavaScript, entonces puede implementar un método para realizar el cambio de tamaño y tener ese control llamando a cualquier otro código de cambio de tamaño.

De lo contrario, si solo está mirando para que el DIV cambie el tamaño cuando alguien cambia el tamaño de la ventana, ¿no funcionaría adjuntar el oyente de cambio de tamaño a la ventana y luego verificar si el DIV se ha cambiado de tamaño (es decir, valores antiguos de ancho/alto y verificarlos al cambiar el tamaño)?

Finalmente, podría considerar usar watch en las propiedades de ancho/alto, aunque no sé si esto es totalmente compatible con el navegador (creo que esto podría ser solo de Mozilla). Encontré this jQuery plugin que parece que podría hacer lo mismo (con algunas pequeñas modificaciones).

Answer 2

¿Por qué esperas que se cambie el tamaño de #dvMyDIV? ¿Es posible que el cambio de tamaño de ese elemento sea el resultado de otra cosa, tal vez se cambie el tamaño de la ventana? Si es así, trate

$(window).resize(function(){alert("Resized");}); 

Answer 3

que podría sugerir algo como esto:

1) al cargar la página, obtener la anchura de su div y la puso en una variable global

2) en la ejecución de cualquier operación directamente o implícitamente cambia el tamaño de ese div (que supongo que es un evento controlado por JavaScript) compruebe el nuevo ancho contra el ancho anterior y actualice el valor global con el nuevo ancho.

Answer 4

¿Estás tratando de establecer myDiv a un tamaño específico?

Pruebe el código JavaScript a continuación.Lo usé para cambiar el tamaño de un div que contiene un objeto flash basado en una altura que se devuelve desde el archivo flash y parecía funcionar bien para mí.

function setMovieHeight(value) { 
    var height = Number(value) + 50; 
document.getElementById("video").height = height; 
} 

la equivilent jQuery debe ser:

function setHeight(value) { 
    var height = number(value) + 50; 
    $('#MyDiv').attr('height') = height; 
} 

cambio de tamaño no sólo se parece aplicarse a objeto de las ventanas.

Answer 5

Aquí hay un ejemplo mucho más refinado y en vivo que hace un montón de cambio de tamaño matemático todo basado en el evento de cambio de tamaño de la ventana. Funciona brillantemente en ff 3.6, safari 4.0.4 y Chrome. Es un poco grueso en ff 3.5. Por lo tanto, debería funcionar en mozilla y webkit en todos los foros. Evito el otro NAVEGADOR, porque realmente no me gusta, y el código es mucho más limpio sin tener que considerarlo. Me doy cuenta de que tendré que superar eso, me lo tragaré cuando tenga que hacerlo y con un recargo IE.

De todos modos el enlace:

http://fridaydev.com/bookmap/proport3.html

Answer 6

No es la pregunta ¿Por qué? Está Exigido, como en, QUEREMOS monitorear un DIV cuando se redimensiona.

Por ejemplo obvio, jQuery UI, redimensionable. Sí, el usuario cambió el tamaño de un div por el arrastre del mouse, ¿y ahora qué? Tal vez el contenido en el interior se cambie de tamaño y queremos saberlo. ¿Y deberíamos tener todo el código en un crisol gigante dentro del código original? No lo creo.

Otro navegador rápido que no hace nada, suspirar.

Answer 7

Con MSIE todo funciona bien. Con Firefox, supongo que tendrás que recurrir a algunas técnicas oblicuas, como almacenar el ancho/alto original del elemento en propiedades personalizadas y usando $(elem).bind('DOMAttrModified', func). Luego, en la devolución de llamada de func(), compruebe si el nuevo ancho/alto difiere de los almacenados previamente, tome la acción de cambio de tamaño respectiva y almacénelos de nuevo para la próxima devolución de llamada del evento. Tenga en cuenta que este enfoque funciona solo para Firefox. Todavía no he podido encontrar una solución decente para Chrome, Safari y Opera. Tal vez el uso de window.setInterval() haría pero ... suena demasiado ... slopy caso la idea de que me hace un poco enfermo :(

Answer 8

hay un plugin para que benalman :)

http://benalman.com/projects/jquery-resize-plugin/