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

It's very simple, take a look at this code for resizeable floating 'left' div columns with width fixing and limits for each other.

var maxWidthOffset, total2Width;
        $('#'+this.id).find('ul:not(:last)').resizable({
            handles: 'e',
            ghost: true,
            delay: 200,
            helper: "overmoused",
            minWidth: 20,
            start: function(e, ui) {
                maxWidthOffset = ui.element.next().width()-20;
                total2Width = ui.element.width()+maxWidthOffset+20;
            },
            resize: function(e, ui) {
                if (ui.size.width > (ui.originalSize.width + maxWidthOffset)) {
                    $(this).resizable('widget').trigger('mouseup');
                }
            },
            stop: function(e, ui) {
                var w;
                if (ui.originalSize.width > ui.size.width) {
                    w = ui.element.next().width()+ui.originalSize.width - ui.size.width;
                    ui.element.next().width(w>20 ? w : 20);
                } else {
                    w = ui.element.next().width()-(ui.size.width - ui.originalSize.width);
                    ui.element.next().width(w>20 ? w : 20);
                }
                ui.element.width(total2Width-ui.element.next().width());
            }
        });