web-dev-qa-db-ja.com

divのjqueryサイズ変更リスナー

これが状況です。2つのdivが隣り合っています。 1つのdivの高さは非常に動的です。つまり、基本的に、コンテンツに合わせて拡大および縮小できることを意味します。たとえば、このdivには、開いたり閉じたりできるコンテンツ、またはajaxで読み込まれたコンテンツに合わせて展開できるコンテナがあります。

さて、このdivの隣には、cssを介して最初のdivの高さにきちんと追従する別のdivがあります。よく働く。しかし、ここに質問があります：この2番目のdivの内容をその高さに応じて変更したいと思います。

つまり、div 1のサイズが変更され、div 2がcssを実行し、div 2に新しいコンテンツを再充填するためにajax呼び出しをトリガーする必要があります。

Jqueryでこれをどのように行うことができるか誰にも考えていますか？可能であれば、タイムアウトを使用しませんか？

乾杯。

jqueryresizelistener
16
Peter

スレッドpoelincaが提供 が示唆するように、この機能にはいくつかの素敵なプラグインが利用可能です。

プラグインのアイデアが気に入らない場合、別の簡単な解決策は、コンテンツが変更されるたびにdivで「サイズ変更」イベントをトリガーすることです。次に、エレガントな observer pattern を使用して、期待どおりにresize（）で監視できます。

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

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

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

魔法のように機能します！

私はattrchangeをテストしましたが、これは機能していませんでした、2時間の仕事を失いました:(

6
Jaroslav Štreit

私が考えることができる唯一のことは、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
}
0
Neal