jquery resize-listener, der auf ein div

Dies ist die situation, ich habe 2 div ' s nebeneinander. Ein div ist sehr dynamisch in der Höhe, die im Grunde bedeutet, es kann wachsen und schrumpfen, um Platz für den Inhalt. Zum Beispiel, dieses div hat Inhalte, die gefaltet werden, öffnen oder schließen, oder-Container, erweitern Sie passen ajax geladenen Inhalt.

Nun, neben diesem div ist ein weiterer, sauber folgt der Höhe der ersten eine durch css. Funktioniert Super. Aber hier ist die Frage: ich möchte den Inhalt des zweiten div-je nach seiner Höhe.

In anderen Worten, Abschnitt 1, änderungen in Größe, div 2 folgt durch css und ich brauche jetzt zum auslösen eines ajax-Aufruf re-fill div 2 mit neuen Inhalten, standesgemäß ist es neu, Größe.

Hat jemand eine Idee, wie ich das mit jquery? Wenn möglich, ohne die Verwendung von timeouts?

Cheers.

InformationsquelleAutor der Frage Peter | 2011-11-08

  1. 19

    Als der thread poelinca zur Verfügung gestellt schon sagt, gibt es ein paar schöne plugins für diese Funktionalität.

    Wenn Sie nicht wie die plugin-Idee, eine weitere einfache Lösung wäre, einfach die trigger eine "resize" - event auf dem div, wenn der Inhalt geändert wird. Dann konnte man beobachten, es mit resize (), wie erwartet, mit einem eleganten observer-Muster.

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

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

    InformationsquelleAutor der Antwort Kato

  2. 6

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

    Funktioniert wie ein Charme!

    Ive getestet attrchange aber dies war nicht die Arbeit, verloren 2Stunden Arbeit 🙁

    InformationsquelleAutor der Antwort Jaroslav Štreit

  3. 0

    Das einzige, was ich denken konnte ist, dass einige timer überprüfen Sie die Höhe jeder X Sekunden.

    Etwas wie dieses:

    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
}

    InformationsquelleAutor der Antwort Neal

Schreibe einen Kommentar