JQuery изменить размер слушателя на div

Question

Это ситуация, у меня есть 2 div рядом друг с другом.Один div очень динамичен по высоте, что в основном означает, что он может увеличиваться и уменьшаться в зависимости от его содержимого.Например, у этого div есть содержимое, которое можно свернуть, открыть или закрыть, или контейнеры, которые могут быть расширены для размещения содержимого, загруженного ajax.

Теперь рядом с этим div стоит еще один, который аккуратно следует за высотой первогочерез css.Работает отлично.Но вот вопрос: я хотел бы изменить содержимое этого второго div в зависимости от его высоты.

Другими словами, div 1 изменяется в размере, div 2 следует через css, и теперь мне нужно вызватьвызов ajax для повторного заполнения div 2 новым контентом, соответствующего его размеру.

Кто-нибудь знает, как я могу сделать это с помощью jquery?Если возможно, без использования тайм-аутов?

Приветствия.

Answer 1

Как указывает поток poelinca, предоставленный , есть несколько хороших плагинов для этой функциональности.

Если вам не нравится идея плагинов, другое простое решение - просто вызватьсобытие "изменить размер" в div каждый раз, когда содержимое модифицируется.Затем вы можете отслеживать это с помощью resize (), как и ожидалось, используя элегантный шаблон наблюдателя .

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

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

Answer 2

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

Работает как шарм!

Я проверил attrchange, но это не помогло, потерял 2 часа работы: (

Answer 3

Единственное, о чем я мог подумать, - это иметь таймер, проверяющий высоту каждые X секунд.

Примерно так:

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
}