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

Question

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

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

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 左右。但我希望它不应该减少，而是停在那里，用户不能进一步增加大小。

请大家帮忙。

Answer 1

替换为：

ui.size.width = maxWidth;

有了这个：

return;

Answer 2

如果我对你的问题的理解正确，你希望用户能够将你的 "chatt-demo" class 的大小增加到 1100px，如果它变得更大，它就不会' t 宽度增加。

一个简单的 CSS 解决方案是将其添加到您的 CSS/styling:

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

Answer 3

ui.size.width = maxWidth;

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

 ui.size.width = 1100;

参考这个

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

Answer 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..

Answer 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;
 }

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

Stop increase width after a perticular width in jquery

html

javascript

css

jquery

chat