Dharmesh patel Dharmesh patel - 5 months ago 15
Javascript Question

Stop increase width after a perticular width in jquery

I am creating a website which have chat support. I want to make its look exactly same as gmail chat means user can resize chat field.

I have made it almost like that but one problem is there: When I resize any field and if size reaches at 1100px then it should stop increase further but it doesn't stops. I made code for it but it has some problem. My code is as below:

Html code is:

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


and jQuery code is:

$('.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.
}
}
}


In above code when size reaches 1100 then div automatically resize to around 250. but I want that It should not decrease but stop there, and user can't increase size further.

Pleaswe anyone help.

Answer

I have found it myself. Just change condition like below:

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