JqueryUI - Resizable

Option - alsoResize

This option can be 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.

This can be of type −

Selector − This type indicates DOM elements to be selected from a DOM document for resizing.

jQuery − A callback function will be called for each resizable element on page. This function should return true if the element is resized.

Element − An element in the Document Object Model (DOM).

Syntax

$( ".selector" ).resizable({ alsoResize: "#identifier" });

Option - animate

This option when set to true is used to enable a visual effect during resizing when the mouse button is released. The default value is false (no effect).

Syntax

$( ".selector" ).resizable({ animate: true });

Option - animateDuration

This option is used to set the duration (in milpseconds) of the resizing effect. This option is used only when animate option is true. By default its value is "slow".

This can be of type −

Number − This specifies duration in milpseconds

String − This sepcifies named duration, such as "slow" or "fast".

Syntax

$( ".selector" ).resizable({ animateDuration: "fast" });

Option - animateEasing

This option is used to specify which easing to apply when using the animate option. By default its value is "swing".

Easing functions specify the speed at which an animation progresses at different points within the animation.

Syntax

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });

Option - aspectRatio

This option is used to indicate whether to keep the aspect (height and width) ratio for the item. By default its value is false.

This can be of type −

Boolean − This value if set to true, the element will maintain its original aspect ratio.

Number − This specifies the element to maintain a specific aspect ratio during resizing.

Syntax

$( ".selector" ).resizable({ aspectRatio: true });

Option - 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.

Syntax

$( ".selector" ).resizable({ autoHide: true });

Option - cancel

This option is used to prevent resizing on specified elements. By default its value is input,textarea,button,select,option.

Syntax

$( ".selector" ).resizable({ cancel: ".cancel" });

Option - containment

This option is used restrict the resizing of elements within a specified element or region. By default its value is false.

This can be of type −

Selector − This type indicates that resizable element will be contained to only the first item in the pst found by the selector.

Element − This type indicates any DOM element. The resizable element will be contained to the bounding box of this element.

String − Possible values for this type are - parent and document.

Syntax

$( ".selector" ).resizable({ containment: "parent" });

Option - delay

This option is used to set tolerance or delay in milpseconds. Resizing or displacement will begin thereafter. By default its value is 0.

Syntax

$( ".selector" ).resizable({ delay: 150 });

Option - disabled

This option disables the resizing mechanism when set to true. The mouse no longer resizes elements, until the mechanism is enabled, using the resizable ("enable"). By default its value is false.

Syntax

$( ".selector" ).resizable({ disabled: true });

Option - distance

With this option, the resizing starts only when the mouse moves a distance(pixels). By default its value is 1 pixel. This can help prevent unintended resizing when cpcking on an element.

Syntax

$( ".selector" ).resizable({ distance: 30 });

Option - ghost

This option when set 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.

Syntax

$( ".selector" ).resizable({ ghost: true });

Option - 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.

Syntax

$( ".selector" ).resizable({ grid: [ 20, 10 ] });

Option - handles

This option is a character string indicating which sides or angles of the element can be resized. The possible values are: n, e, s, and w for the four sides, and ne, se, nw, and sw for the four corners. The letters n, e, s, and w represent the four cardinal points (North, South, East, and West).

By default its values are e, s, se.

Syntax

$( ".selector" ).resizable({ handles: "n, e, s, w" });

Option - helper

This option is used to add a CSS class to style the element to be resized. When the element is resized a new <span> 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 <span> element disappears. By default its value is false.

Syntax

$( ".selector" ).resizable({ helper: "resizable-helper" });

Option - maxHeight

This option is used to set the maximum height the resizable should be allowed to resize to. By default its value is null.

Syntax

$( ".selector" ).resizable({ maxHeight: 300 });

Option - maxWidth

This option is used to set the maximum width the resizable should be allowed to resize to. By default its value is null.

Syntax

$( ".selector" ).resizable({ maxWidth: 300 });

Option - minHeight

This option is used to set the minimum height the resizable should be allowed to resize to. By default its value is 10.

Syntax

$( ".selector" ).resizable({ minHeight: 150 });

Option - minWidth

This option is used to set the minimum width the resizable should be allowed to resize to. By default its value is 10.

This can be of type −

Syntax

$( ".selector" ).resizable({ minWidth: 150 });