2011-07-17 94 views
6

permítanme comenzar diciendo que debido al complicado diseño del diseño terminé escribiendo una función llamada equalHeights que básicamente mira varios divs en mi diseño y selecciona el más alto y establece el altura de descanso a eso, para que pueda terminar con divs que tienen la misma altura. Entonces, básicamente, después de la carga de la página, si miras el código verás que style = "height: xxx" se aplica a cada div. Esto no puedo cambiar, por lo que cualquier solución no puede tocar esta funcionalidad.Cómo detectar y cambiar la altura del div en jQuery

Los divs también tienen un desbordamiento establecido en oculto, que nuevamente tiene su propósito y no puede cambiar.

Por lo tanto, teniendo en cuenta lo anterior, lo que tengo que hacer es poder cambiar la altura de los divs en función de los cambios debidos a la interactividad del usuario. Por ejemplo, tengo una tabla con algunas filas ocultas que se expanden a medida que el usuario hace clic en un enlace. La longitud extra de la tabla se ocultará debido al desbordamiento, necesito el tamaño del div para expandir. Al mismo tiempo, no quiero vincular esta expansión a ese clic específico, quiero que Javascript detecte cambios en el contenido y expanda mi div en consecuencia. La razón por la que no quiero que se vincule así es porque necesito que esto se implemente en diferentes páginas con el mismo diseño y no quiero codificar cada evento.

He intentado tanto:

$("#myDiv").resize(function(){ 
    equalHeight($("#myDiv")); 
}); 

y

$("#myDiv").content().resize(function(){ 
    equalHeight($("#myDiv")); 
}); 

no parecen funcionar! ¿Algunas ideas?

Respuesta

8

El suceso básico de cambio de tamaño sólo puede ser obligado a $ (ventana), es necesario utilizar un plugin si usted quiere ser capaz de unirse al evento de cambio de tamaño de un div:

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

+0

O si su un fuera cosa que usted puede escribir su propio plugin que mira a la altura de los elementos en un temporizador con algún intervalo pequeña y activa la función de devolución de llamada cuando encuentra un cambio. – Nitin

0

Suponiendo que tiene un número determinado de filas que se muestran, puede buscar un número mayor que ese y luego ajustar el div según corresponda.

1

Puede activa tu propio evento div en función. Por lo tanto, no lo forzará a volver a escribir las funciones de clic.

http://jsfiddle.net/JKByC/7/

+0

Debe incluir el código en la respuesta en sí. Pero esta es una gran idea. Desencadena un evento en la función que sabes que causa el cambio de tamaño del div y luego atrapa ese evento. – Andrew

0
 var last_height = $('#div').css('height'); 

     $(window).resize(function() { 
      if($('#div').css('height') != last_height) 
      { 
       last_height = $('#div').css('height'); 
       //do what you want 
      } 
     }); 
+0

Añadir explicación para la publicación. ¿Por qué su publicación es una respuesta para la pregunta en particular? La respuesta del código solo no es suficiente. Consulte [¿Cómo escribo una buena respuesta?] (Http://stackoverflow.com/help/how-to-answer) – Shashanth

Cuestiones relacionadas