如何在窗口调整大小时隐藏 Facebook 聊天框？

Posted 2023-02-23

【中文标题】如何在窗口调整大小时隐藏 Facebook 聊天框？

【英文标题】：How to hide Facebook chat boxes on Window resize?

【发布时间】：2013-04-05 09:21:45

【问题描述】：

我试图在 Jquery 中重现 Facebook 如何在视口大小更改时隐藏或显示打开的聊天框。基本上，如果您打开了 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() ;
    

)

【问题讨论】：

你能说得更清楚些吗？提供代码？

Window_Width 为 240px，contactlist_width 为 200px。基本上将所有可见窗口的总宽度加上 100px 边距的联系人列表窗口。

【参考方案1】：

您的问题与每次调整窗口大小时多次触发调整大小功能有关。我用chrome测试过，它触发了两次。 试试这个： https://github.com/louisremi/jquery-smartresize

【讨论】：

好建议！它可以一次隐藏或显示 1 个聊天窗口，但是如果我将视口的大小非常快地调整为非常大或非常小的尺寸，那么它不会适当地减少或增加窗口的数量......我已经重写了我的函数来显示具有最终窗口大小的正确数量的框。

尝试使用超时等待调整大小并获取宽度。在 chrome 中很好奇，在 rezise 时窗口采用 2 个宽度，一个是 1px，另一个是实际宽度。这似乎不是 jQuery 的问题，而是完成这项工作的 javascript 函数。

如果答案对您有用，请接受它作为解决方案，我认为您还不能投票。我们都喜欢在这里得到一些分数 =)

我的意思是，在 *** 中，当您提出问题并且有人回答了一个好的解决方案时，您可以接受该解决方案作为您问题的回答，并为给出解决方案的用户提供一些分数。这个很棒的网站使用分数来为其用户提供某种状态。 =)