jquery resize oyente en un div

Esta es la situación, tengo 2 div uno al lado del otro. Un div es muy dinámico en altura, lo que básicamente significa que puede crecer y reducirse para adaptarse a su contenido. Por ejemplo, este div tiene contenido que se puede abrir o cerrar, o contenedores que pueden expandirse para adaptarse a un contenido cargado de jaja.jquery resize oyente en un div

Ahora, junto a este div hay otro que sigue cuidadosamente la altura del primero a través de css. Funciona genial. Pero aquí está la pregunta: me gustaría cambiar el contenido de este segundo div dependiendo de su altura.

En otras palabras, div 1 cambia de tamaño, div 2 sigue a css y ahora necesito activar una llamada ajax para volver a llenar div 2 con nuevo contenido, acorde con su nuevo tamaño.

¿Alguien tiene una idea de cómo puedo hacer esto con jquery? Si es posible, sin el uso de tiempos de espera?

Saludos.

Fuente

2011-11-08 Peter

allmoast duplicar http://stackoverflow.com/questions/172821/detecting-when-a-divs-height-changes- using-jquery, por favor busque antes de publicar una pregunta –

Como the thread poelinca provided sugiere, hay algunos plugins agradable disponibles para esta funcionalidad.

Si no le gusta la idea del complemento, otra solución simple sería simplemente activar un evento de "cambio de tamaño" en el div cada vez que se modifique el contenido. Luego podría supervisarlo con resize() como se esperaba, utilizando un elegante observer pattern.

function appendContent($div, content) { 
    $div.append(content).trigger($.Event('resize')); 
} 

$div.bind('resize', function(e) { 
    // all your magic resize mojo goes here 
});

Fuente

2011-11-08 16:59:41 Kato

¡Gracias! No tengo absolutamente nada en contra de los complementos, esto funciona como ¡un placer! – Peter

Hola a todos. Llego tarde a la conversación, pero ¿cómo usarías exactamente este código? ¿Cómo se llama? –

@JeremyMiller, la idea aquí es que siempre que el contenido se actualice, llamar al método appendContent (...) (tienes que llamar a algo, después de todo). Dentro de appendContent, simplemente activa su propio evento de cambio de tamaño, lo que indica que el div ha cambiado de tamaño. El código dentro de '$ div.bind ('resize', ...)' se llama automágicamente (escucha los eventos de cambio de tamaño) – Kato

Lo único que se me ocurre es tener un temporizador que compruebe la altura cada X segundos.

Algo como esto:

function checkHeightTimer(){ 
    var div1 = $('#div1'); 
    var div2 = $('#div2'); 
    var somesize = #somenumber here; 
    if(div1.height() > somesize){ 
     //do something to div2 
    } 
    setTimeout(checkHeightTimer, 500); //at 500 miliseconds 
}

Fuente

2011-11-08 16:23:44 Neal

Cualquier solución que requiera revisiones periódicas podría considerarse un "hack" no tan elegante en lugar de una solución basada en eventos. ¿A veces es inevitable? –

https://github.com/sdecima/javascript-detect-element-resize

funciona como un encanto!

he probado attrchange pero esto no estaba funcionando, perdieron 2 horas de trabajo :(

Fuente

2015-02-16 14:13:06

Muy buena secuencia de comandos! La 'única', vista hasta el momento, que ** NO use temporizadores ** para sondear intermitentemente el tamaño de los elementos para detectar un cambio. ¡Esta técnica presenta un rendimiento terrible! Gracias @Jaroslav –

Respuesta

Cuestiones relacionadas