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.

Didier Ghys · Accepted Answer · 2011-12-18 10:03:32Z

21

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

answered Dec 18, 2011 at 10:03

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2011-12-18 10:10:27Z

4

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

edited Dec 18, 2011 at 10:10

answered Dec 18, 2011 at 10:02

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related