jQuery UI Resizable stop resizing in the resize event

Question

Using jQuery UI Resizable I'm trying to prevent resizing based on various rules. The built-in containment feature doesn't seem to work properly with absolutely positioned elements, and I would need something more flexible than that anyway.

Having something like this:

$( ".selector" ).resizable({ resize : function(event, ui) { /* ??? */ } });

How can I tell the "ui" object to prevent resizing?

Thanks.

Answer 1

Its been long time, but there is a solution to this problem in case somebody read this.

You just need to set the maxWidth or minWidth (depends on what you want to do) inside the resize to stop it from resizing.

You can do something like the following:

minWidth: 300,
start: function(event, ui) {
    // get it once so we don't get it hundreds of time inside resize
    this.enforcedMinWidth = $(this).resizable("option", "minWidth");
},
resize: function(event, ui) {
    // use whatever conditions you want to stop here
    // in my original case, i was checking its width vs neighbor and
    // stops the resizing accordingly, so change it to fit your case
    if (ui.element.next().width() <= this.enforcedMinWidth) {
        $(this).resizable("option", "maxWidth", ui.size.width); 
    }
},
stop: function(event, ui) {
    // reset
    $(this).resizable("option", "maxWidth", null);
    // cleanup
    delete this.enforcedMinWidth;
}

Answer 2

There is no standart option to stop the resizing at this version. You can disable the resizable but it will continue resizing and will stop the option to resize only in the next time you try.

$(".selector").resizable("disable");

Anyway i found that you can limit the resizing using the maxWidth and maxHeight property directly from the Resize Event.

$(".selector").resizable({
    aspectRatio: true,
    handles: 'all',
    resize: function( event, ui ){
        if(x > y){
            (".selector").resizable("option","maxWidth",ui.size.width);
            return;
        }
    }
});