How to stop the resizable property of an element in jQuery UI

Question

I'm using jQuery UI library to provide some UI functionalities to the DOM elements.

I have a div that can be resized when the client selects a custom dimension option, but I also have another mode that resizes the div with a fixed dimensions and the client cannot resize the div.

My code of the "custom dimensions" is similar to this:

$("#element").resizable ({
    aspectRatio: 4/3,
    minWidth: 320,
    minHeight: 240,
    maxWidth: 640,
    maxHeight: 480
});

But now I need to stop the resizing event. How can I do this?

Thanks.

Answer 1

By disabling

The plugin provides a "disable" method that you can call like this:

$("#element").resizable('disable');

The problem is that it adds a class "ui-state-disabled" to the resizable element giving it a visual disabled state. If you don't want that, you override the style or remove the added class like this:

$("#element").resizable('disable').removeClass('ui-state-disabled');

---

By destroying

Another way to do this is to "destroy" the plugin from the element when you don't want it to be resizable:

$("#element").resizable('destroy');

You can then re-apply your resizable if you'd like to re-enable the effect again

Answer 2

Call the destroy or disable methods, e.g.:

$("#element").resizable('disable');

If you use disable, you can use enable again later, but the default action also dims the element a bit which you may not want.

Completely gratuitous live demos: enable/disable | destroy/recreate