2013-04-05 330 views
0

我试图在jquery中重现,当视口大小改变时,Facebook如何隐藏或显示打开的聊天框。基本上,如果你有6个聊天窗口打开,并且如果你调整或缩小你的浏览器,一些聊天窗口被隐藏,如果在视觉上6不能修复屏幕大小。如何隐藏窗口调整大小的Facebook聊天框?

我使用函数$(window).resize()来检测所有打开的窗口的总宽度加上某个边距是否大于窗口宽度,然后隐藏第一个聊天窗口或显示最后一个窗口如果有更多窗口的空间。基本POP或推到协议栈...

我的方法是行不通的,因为每当大小调整运行,我的剧本是不断尝试隐藏或显示窗口。(请参见下面的代码)

任何建议都赞赏。

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() ; 
    } 

})

+0

你能更明确吗?提供代码? – tbem 2013-04-05 11:47:08

+0

Window_Width为240px,contactlist_width为200px。基本上添加所有可见窗口的总宽度加上100px页边距的联系人列表窗口。 – guang 2013-04-05 15:52:52

回答

0

你的问题的接缝与多个每次调整窗口大小时触发调整大小功能有关。我用铬进行了测试,并且触发了两次。 试试看: https://github.com/louisremi/jquery-smartresize

+0

伟大的建议!它一次隐藏或显示1个聊天窗口,但如果我真的将窗口大小调整为非常大或很小的尺寸,那么它不会适当减少或增加窗口的数量......我已经重写了我的函数以显示适量的最终窗口大小的框。 – guang 2013-04-08 02:36:18

+0

尝试使用超时等待调整大小,并采取宽度。在铬是好奇的,在rezise窗口采取2宽度,其中1px和其他真正的宽度。这个问题不是jQuery的问题,而是做这项工作的javascript函数。 – tbem 2013-04-08 09:38:15

+0

如果答案已经解决,请接受它作为解决方案,我认为你还不能投票。我们都喜欢在这里得到一些意见=) – tbem 2013-04-08 09:43:07