jquery cambiar el tamaño del oyente en un div

This is the situation, I have 2 div's next to each other. One div is very dynamic in height, which basically means it can grow and shrink to accommodate for it's content. For example, this div has content that can be folded open or close, or containers that can expand to fit ajax loaded content.

Now, next to this div is another one that neatly follows the height of the first one through css. Works great. But here is the question: I would like to change the content of this second div depending on its height.

In other words, div 1 changes in size, div 2 follows through css and I now need to trigger an ajax call to re-fill div 2 with new content, befitting it's new size.

Has anybody an idea how I can do this with jquery? If possible, without the use of timeouts?

Saludos.

preguntado el 08 de noviembre de 11 a las 16:11

allmoast duplicate stackoverflow.com/questions/172821/… , please search before posting a question -

3 Respuestas

As the thread poelinca provided suggests, there are some nice plugins available for this functionality.

If you don't like the plugin idea, another simple solution would be to simply trigger a "resize" event on the div whenever the content is modified. Then you could monitor it with resize() as expected, utilizing an elegant patrón de observador.

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

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

contestado el 23 de mayo de 17 a las 13:05

Thanks! I have absolutely nothing against plugins, this works like a treat! - Peter

Hey y'all. I'm late to the conversation, but how exactly would you use this bit of code? How does one go about calling it? - Jeremy Miller

@JeremyMiller the idea here is that whenever the content updates, you call the appendContent(...) method (you have to call something, after all). Inside appendContent, you simply trigger your own resize event, indicating that the div has resized. The code inside $div.bind('resize', ...) is called automagically (it listens for resize events) - Kato

That makes sense, but where exactly do you add the selector that you want to check for? That's what i can't seem to figure out. Let's say i have a div called "#dynamic", where exactly would that go so that I watch out for the content in that div? - Jeremy Miller

You would need a situation where you're updating the content in one place, and want to do some unobtrusive monitoring (think inversion of control) somewhere else; algo como esto; again, un complemento would probably make it even simpler in most cases. - Kato

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

¡Funciona de maravilla!

I´ve tested attrchange but this was not working, lost 2hours of work :(

Respondido 16 Feb 15, 17:02

Very good script! The 'only' one, seen so far, that DO NOT use timers to intermittently poll the size of the elements to detect a change. This technic introduces terrible performance! Thanks @Jaroslav - Pedro Ferreira

The only thing I could think of is having some timer checking the height every 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
}

Respondido 20 Oct 15, 17:10

Any solution that requires periodic checks could be considered a not so elegant "hack" rather than an event based solution. Sometimes inevitable? - Jan Werkhoven

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.