Javatpoint Logo
Javatpoint Logo

jQuery UI resizable

jQuery UI resizable() method is used to resize any DOM element. It simplifies the method of resizing of elements and reduces time and a lot of coding.

The resizable () method displays an icon in the bottom right of the item to resize.

Syntax:

You can use the resizable () method in two forms:

First Method

The resizable (options) method specifies that you can resize an HTML element. Here the ?options? parameter is an object that specifies the behavior of the elements involved when resizing.

Syntax:

You can use one or more options at a time of using JavaScript object. In the case of more than one option, you have to separate them using a comma as follows:

Following is a list of different options that can be used with this method:

Option Description
alsoResize This option is of type selector, jQuery , or any DOM element. It represents elements that also resize when resizing the original object. By default its value is FALSE.
animate If you set this option to TRUE, it enables a visual effect during resizing when the mouse button is released. The default value is FALSE (no effect).
animateDuration This option specifies the duration of the resizing effect in millisecond. It is used only when animate option is true. By default its value is "slow".
animateEasing This option specifies which easing should be applied when using the animate option. By default its value is "swing".
aspectRatio This option indicates the aspect (height and width) ratio for the item. By default its value is false.
autoHide This option is used to hide the magnification icon or handles, except when the mouse is over the item. By default its value is false.
cancel This option is used to prevent resizing on specified elements. By default its value is input, textarea, button, select, option.
containment This option is used restrict the resizing of elements within a specified element or region. By default its value is false.
delay This option is used to set tolerance or delay in milliseconds. After that, resizing or displacement will begin. By default its value is 0.
disabled If you set this option to TRUE, it disables the resizing mechanism. The mouse no longer resizes elements, until the mechanism is enabled, using the resizable ("enable"). By default its value is false.
distance This option specifies that the resizing will start only when the mouse moves a distance(pixels). By default its value is 1 pixel. This can help prevent unintended resizing when clicking on an element.
ghost If you set this option to TRUE, a semi-transparent helper element is shown for resizing. This ghost item will be deleted when the mouse is released. By default its value is false.
grid This option is of type array [x, y], indicating the number of pixels that the element expands horizontally and vertically during movement of the mouse. By default its value is false.
handles This option is a character string that specifies which sides or angles of the element can be resized. By default its values are e, s, se.
helper This option is used to add a CSS class to style the element which you want to resize. When the element is resized a new <div> element is created, which is the one that is scaled (UI-resizable-helper class). Once the resize is complete, the original element is sized and the <div> element disappears. By default its value is false.
maxHeight This option is used to set the maximum height the resizable should be allowed to resize to. By default its value is NULL.
maxWidth This option is used to set the maximum width the resizable should be allowed to resize to. By default its value is NULL.
minHeight This option is used to set the minimum height the resizable should be allowed to resize to. By default its value is 10.
minWidth This option is used to set the minimum width the resizable should be allowed to resize to. By default its value is 10.

jQueryUI resizable() Example 1

Let's take a simple example to demonstrate the resizable functionality, passing no parameter to the resizable () method.

Test it Now

jQueryUI resizable() example 2

Use of animate and ghost:

The following example shows the usage of two options animate and ghost in the resize function of jQuery UI

Test it Now

jQuery UI resizable() example 3

Use of delay, distance and autoHide:

The following example shows the usage of three options delay, distance and autoHide in the resize function of jQuery UI.

Test it Now

jQuery UI resizable() example 4

Use of alsoResize:

The following example demonstrates the use of option alsoResize in the resize function of jQuery UI.

Test it Now

Second Method

The resizable ("action", params) method is used to perform an action on resizable elements. For example: allowing or preventing resizing functionality. The action is specified as a string in the first argument (e.g., "disable" to prevent the resize).

Syntax:

Following is a list of actions that can be used with this method:

Action Description
destroy This action is used to destroy the resizable functionality of an element completely. This will return the element back to its pre-init state.
disable This action is used to disable the resizing functionality of an element. This method does not accept any arguments.
enable This action is used to enable the resizing functionality of an element. This method does not accept any arguments.
option( optionName ) This action retrieves the value of the specified optionName. This option corresponds to one of those used with resizable (options).
option() This action is used to get an object containing key/value pairs representing the current resizable options hash. This action does not accept any arguments.
option(optionName, value ) This action sets the value of the resizable option with the specified optionName. This option corresponds to one of those used with resizable (options).
option( Options ) This action sets one or more options for the resizable.
widget() This action returns a jQuery object containing the resizable element. This method does not accept any arguments.

jQueryUI resizable() example 5

Let's take some examples to demonstrate the usage of actions from the above table.

In the following example, we are going to demonstrate the use of destroy () and disable () methods.

Test it Now



Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA