Resizing constraints jQuery .resizable()

Question

I try to force jquery resizing in width, i explain:

I have a resizable element in a container:

<div class="container">
    <div class="resizableObj"></div>
</div>

My container had a fixed width:

.container{
    width:160px;
    background-color:red;
}

I want to resize height and at the same time,i want that the container height grow. The only thing that i need is to constraint the width resizing.

I can't do it with the maxWidth property because i have more than one resizing object and they are placed at different position in the container.

If i use the "containment:'.container'" option, i can't enlarge my container if i resiz my object at the bottom of it, but i'm constrained width.

So what i can do ?

Answer 1

Try this: http://jsfiddle.net/lotusgodkk/GCu2D/119/

Js:

$('.resizableObj').each(function () {
var d = $(this);
var maxW = parseInt(d.attr('data-maxwidth'));
d.resizable({
    maxWidth: maxW,        
    resize:function(event,ui){
        var H=0;
        $('.resizableObj').each(function(){
            var div = $(this);
            H+=div.outerHeight(true);                
        });
        $('.container').height(H+20);
        if(d[0].getBoundingClientRect().right>$('.container')[0].getBoundingClientRect().right){
            console.log('outside');
            $(this).resizable('widget').trigger('mouseup');
        }            
    }
});
});

HTML:

<div class="container">
 <div data-maxwidth="120" class="resizableObj"></div>
 <div data-maxwidth="220" class="resizableObj"></div>
 <div data-maxwidth="340" class="resizableObj"></div>
 <div data-maxwidth="30" class="resizableObj"></div>
</div>