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:

OptionDescription
alsoResizeThis 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.
animateIf 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).
animateDurationThis 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".
animateEasingThis option specifies which easing should be applied when using the animate option. By default its value is "swing".
aspectRatioThis option indicates the aspect (height and width) ratio for the item. By default its value is false.
autoHideThis option is used to hide the magnification icon or handles, except when the mouse is over the item. By default its value is false.
cancelThis option is used to prevent resizing on specified elements. By default its value is input, textarea, button, select, option.
containmentThis option is used restrict the resizing of elements within a specified element or region. By default its value is false.
delayThis option is used to set tolerance or delay in milliseconds. After that, resizing or displacement will begin. By default its value is 0.
disabledIf 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.
distanceThis 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.
ghostIf 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.
gridThis 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.
handlesThis 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.
helperThis 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.
maxHeightThis option is used to set the maximum height the resizable should be allowed to resize to. By default its value is NULL.
maxWidthThis option is used to set the maximum width the resizable should be allowed to resize to. By default its value is NULL.
minHeightThis option is used to set the minimum height the resizable should be allowed to resize to. By default its value is 10.
minWidthThis 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:

ActionDescription
destroyThis action is used to destroy the resizable functionality of an element completely. This will return the element back to its pre-init state.
disableThis action is used to disable the resizing functionality of an element. This method does not accept any arguments.
enableThis 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



Latest Courses