ビューポートのサイズが変更されたときにFacebookが開いたチャットボックスを非表示または表示する方法をJqueryで再現しようとしています。基本的に、6 つのチャット ウィンドウを開いている場合、ブラウザのサイズを変更または縮小すると、視覚的に 6 つが画面サイズを修正できない場合、一部のチャット ウィンドウが非表示になります。
関数 $(window).resize() を使用して、開いているすべてのウィンドウの合計幅にマージンを加えたものがウィンドウの幅よりも大きいかどうかを検出し、最初のチャット ウィンドウを非表示にするか、スペースがある場合は最後のチャット ウィンドウを表示します。より多くのウィンドウ。基本的なポップまたはプッシュ トゥ スタック...
サイズ変更が実行されるたびに、スクリプトが常にウィンドウを非表示または表示しようとするため、私の方法は機能しません... (以下のコードを参照)
任意の提案をいただければ幸いです。
ChatWidget.isEnoughRoom = function() {
return ($(window).width() > ((ChatWidget.WINDOW_WIDTH * $('.chatWindowWidget:visible').length) + ChatWidget.CONTACTLIST_WIDTH + 100));
};
$(window).resize(function(){
if(!ChatWidget.isEnoughRoom()) {
$('.chatWindow:visible:last').hide() ;
} else {
$('.chatWindow:hidden:last').show() ;
}
})