在jquery中的特定宽度之后停止增加宽度答案

【问题标题】：Stop increase width after a perticular width in jquery在jquery中的特定宽度之后停止增加宽度
【发布时间】：2016-07-01 12:30:31
【问题描述】：

我正在创建一个支持聊天的网站。我想让它看起来和 gmail 聊天完全一样意味着用户可以调整聊天字段的大小。

我已经做到了，但存在一个问题：当我调整任何字段的大小时，如果大小达到 1100 像素，那么它应该停止进一步增加，但它不会停止。我为它编写了代码，但它有一些问题。我的代码如下：

HTML代码是：

<div class="chat">

<div class="chatt-demo" id="resizeDiv" style="border: 1px solid #000;width:100px;height:100px;margin left: 10px;">First
</div>
    <div class="chatt-demo" id="resizeDiv" style="border: 1px solid #000;width:100px;height:100px;margin left: 10px;">First
</div>
    <div class="chatt-demo" id="resizeDiv" style="border: 1px solid #000;width:100px;height:100px;margin left: 10px;">First
</div>
    <div class="chatt-demo" id="resizeDiv" style="border: 1px solid #000;width:100px;height:100px;margin left: 10px;">First
</div>
</div>

而 jQuery 代码是：

$('.chatt-demo').resizable({
                    //containment: ".chart-area",
                    maxHeight: 580, 
                    //maxWidth: 300, 
                    minHeight: 330,
                    minWidth: 200,
                    handles: "n, nw, w, sw",
                    resize: function(event, ui) {
                            // return value from another function
                            restrictSize(ui);
                    }

        });

function restrictSize(ui) {
        var w = GetWidths('.chatt-demo');

        function GetWidths(id) {
            var i = 0;
            maxwidth = 250; 

            $(id).not('.hide-show-chatted').each(function (index) {
                i += parseInt($(this).width(), 10);
            });


            if(i > 1100){ 
             //if(maxwidth <= 0){ maxwidth = 250; }
             //maxheight = 250; ui.size.height = ui.size.height > maxheight ?              maxheight : ui.size.height; 
             //ui.size.width = ui.size.width > maxwidth ? maxwidth : ui.size.width;
             // ui.size.width = 500;

              ui.size.width = maxWidth;
              // here I have tried many solutions like fixed width and all but no succeess.
            }
        }
    }

在上面的代码中，当大小达到 1100 时，div 会自动调整到 250 左右。但我希望它不应该减小而是停在那里，并且用户不能进一步增加大小。

请大家帮忙。

【问题讨论】：

因为您分配了ui.size.width = maxWidth; 和maxwidth = 250。改变它。
为什么不使用maxWidth: 1100 ???
仅供参考，ID 在文档上下文中必须是唯一的
@Wolff 你可以参考gmail聊天系统
我只想在 1100px 宽度后停止调整大小。

标签： javascript jquery html css chat

【解决方案1】：

替换这个：

ui.size.width = maxWidth;

用这个：

return;

【讨论】：

我已经尝试过了，但现在 div 进入上限并且不可接受。

【解决方案2】：

ui.size.width = maxWidth;

您已定义 maxWidth= 250；所以它得到调整到250。您可以尝试将其设置为 1100；

 ui.size.width = 1100;

参考这个

http://jsfiddle.net/Anuja_oab/ukXap/142/

【讨论】：

你能不能试着去掉resize函数调用，只设置maxWidth:1100，
不，但我想提供这个便利。
表示移除调用restrictSize(ui)；从您的调整大小选项。最大宽度：1100，。它应该工作
mIn jsfiddle 它工作正常。你能检查一下萤火虫，你可能会得到任何错误
我试过了。但是，大小可以增加 1100 像素。所以这个解决方案是不可接受的。

【解决方案3】：

如果我正确理解了您的问题，您希望用户能够将您的“chat-demo”类的大小增加到 1100 像素，如果它变得更大，它根本不会增加宽度。

对此的简单 CSS 解决方案是将其添加到您的 CSS/样式中：

.chatt-demo {
  max-width: 1100px;
  // alternatively max-width: 1100px !important; if the above doesn't do anything
}

【讨论】：

chat-demo 是一个不止一次（并行）的 div。所以其他 div 对齐会受到干扰:(
@Dharmeshpatel 然后您需要更改 div 类，制作“.chat-demo-limited”或其他内容，然后将其添加到您想要限制的特定对象中。

【解决方案4】：

尝试在该 div 上换行..

<div class="chatt-demo" id="resizeDiv" style="border: 1px solid #000;width:200px; max-width:1100px; word-wrap:break-word;height:100px;margin left: 10px;">your text here..

【讨论】：

无法设置最大宽度，因为有超过 1 个具有此类名称的 div。
好的，那就试试这个不带max-width，但无论如何你必须在这里使用文本换行..

【解决方案5】：

我自己找到了。只需更改条件如下：

if(i > 1100){ 
    var mywdth = $('.chatt-demo').width();
    var totalWidth = 0;
    $('.chatt-demo').not('.ui-resizable-resizing , .hide-show-chatted').each(function(index) {
    totalWidth += parseInt($(this).width(), 10);
    });
    var myMaxWidth = parseInt(1100-totalWidth, 10);
    ui.size.width = myMaxWidth;
 }

【讨论】：