jQuery UI resizable documentation

## Resizable Widgetversion added: 1.0

Description: Change the size of an element using the mouse.

## Options

### alsoResizeType: Selector or jQuery or Element

Default: `false`
One or more elements to resize synchronously with the resizable element.

### animateType: Boolean

Default: `false`
Animates to the final size after resizing.

### animateDurationType: Number or String

Default: `"slow"`
How long to animate when using the `animate` option.
Multiple types supported:

- Number: Duration in milliseconds.
- String: A named duration, such as `"slow"` or `"fast"`.

### animateEasingType: String

Default: `"swing"`
Which easing to apply when using the `animate` option.

### aspectRatioType: Boolean or Number

Default: `false`
Whether the element should be constrained to a specific aspect ratio.
Multiple types supported:

- Boolean: When set to `true`, the element will maintain its original aspect ratio.
- Number: Force the element to maintain a specific aspect ratio during resizing.

### autoHideType: Boolean

Default: `false`
Whether the handles should hide when the user is not hovering over the element.

### cancelType: Selector

Default: `"input,textarea,button,select,option"`
Prevents resizing from starting on specified elements.

### containmentType: Selector or Element or String

Default: `false`
Constrains resizing to within the bounds of the specified element or region.
Multiple types supported:

- Selector: The resizable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.
- Element: The resizable element will be contained to the bounding box of this element.
- String: Possible values: `"parent"` and `"document"`.

### delayType: Number

Default: `0`
Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element.

### disabledType: Boolean

Default: `false`
Disables the resizable if set to `true`.
Code examples:

Initialize the resizable with the disabled option specified:

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

Get or set the disabled option, after initialization:

`// getter` `var` `disabled = $(` `".selector"` `).resizable(` `"option"``,` `"disabled"` `);` `// setter` `$(` `".selector"` `).resizable(` `"option"``,` `"disabled"``,` `true` `);`

### distanceType: Number

Default: `1`
Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element.

### ghostType: Boolean

Default: `false`
If set to `true`, a semi-transparent helper element is shown for resizing.

### gridType: Array

Default: `false`
Snaps the resizing element to a grid, every x and y pixels. Array values: `[ x, y ]`.

### handlesType: String or Object

Default: `"e, s, se"`
Which handles can be used for resizing.
Multiple types supported:

- String: A comma delimited list of any of the following: n, e, s, w, ne, se, sw, nw, all. The necessary handles will be auto-generated by the plugin.
- Object: The following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

### helperType: String

Default: `false`
A class name that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized.

### maxHeightType: Number

Default: `null`
The maximum height the resizable should be allowed to resize to.

### maxWidthType: Number

Default: `null`
The maximum width the resizable should be allowed to resize to.

### minHeightType: Number

Default: `10`
The minimum height the resizable should be allowed to resize to.

### minWidthType: Number

Default: `10`
The minimum width the resizable should be allowed to resize to.

## Methods

### destroy()

Removes the resizable functionality completely. This will return the element back to its pre-init state.

- This method does not accept any arguments.

### disable()

Disables the resizable.

- This method does not accept any arguments.

### enable()

Enables the resizable.

- This method does not accept any arguments.

### option( optionName ) Returns: Object

Gets the value currently associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to get.

### option() Returns: PlainObject

Gets an object containing key/value pairs representing the current resizable options hash.

- This method does not accept any arguments.

### option( optionName, value )

Sets the value of the resizable option associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to set.
- value
  Type: Object
  A value to set for the option.

### option( options )

Sets one or more options for the resizable.

- options
  Type: Object
  A map of option-value pairs to set.

### widget() Returns: jQuery

Returns a `jQuery` object containing the resizable element.

- This method does not accept any arguments.

## Events

### create( event, ui )

Triggered when the resizable is created.

- event
  Type: Event
- ui
  Type: Object

### resize( event, ui )

This event is triggered during the resize, on the drag of the resize handler.

- event
  Type: Event
- ui
  Type: Object
  - element
    Type: jQuery
    The jQuery object representing the element to be resized
  - helper
    Type: jQuery
    The jQuery object representing the helper that's being resized
  - originalElement
    Type: jQuery
    The jQuery object representing the original element before it is wrapped
  - originalPosition
    Type: Object
    The position represented as `{ left, top }` before the resizable is resized
  - originalSize
    Type: Object
    The size represented as `{ width, height }` before the resizable is resized
  - position
    Type: Object
    The current position represented as `{ left, top }`
  - size
    Type: Object
    The current size represented as `{ width, height }`

### start( event, ui )

This event is triggered at the start of a resize operation.

- event
  Type: Event
- ui
  Type: Object
  - element
    Type: jQuery
    The jQuery object representing the element to be resized
  - helper
    Type: jQuery
    The jQuery object representing the helper that's being resized
  - originalElement
    Type: jQuery
    The jQuery object representing the original element before it is wrapped
  - originalPosition
    Type: Object
    The position represented as `{ left, top }` before the resizable is resized
  - originalSize
    Type: Object
    The size represented as `{ width, height }` before the resizable is resized
  - position
    Type: Object
    The current position represented as `{ left, top }`
  - size
    Type: Object
    The current size represented as `{ width, height }`

### stop( event, ui )

This event is triggered at the end of a resize operation.

- event
  Type: Event
- ui
  Type: Object
  - element
    Type: jQuery
    The jQuery object representing the element to be resized
  - helper
    Type: jQuery
    The jQuery object representing the helper that's being resized
  - originalElement
    Type: jQuery
    The jQuery object representing the original element before it is wrapped
  - originalPosition
    Type: Object
    The position represented as `{ left, top }` before the resizable is resized
  - originalSize
    Type: Object
    The size represented as `{ width, height }` before the resizable is resized
  - position
    Type: Object
    The current position represented as `{ left, top }`
  - size
    Type: Object
    The current size represented as `{ width, height }`

The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height.

### Additional Notes:

- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

## Example:

#### A simple jQuery UI Resizable.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | `<!doctype html>` `<``html` `lang``=``"en"``>` `<``head``>` `` `<``meta` `charset``=``"utf-8"``>` `` `<``title``>resizable demo</``title``>` `` `<``link` `rel``=``"stylesheet"` `href``=``"http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"``>` `` `<``style``>` `` `#resizable {` `` `width: 100px;` `` `height: 100px;` `` `background: #ccc;` `} </``style``>` `` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.2.js"``></``script``>` `` `<``script` `src``=``"http://code.jquery.com/ui/1.9.1/jquery-ui.js"``></``script``>` `</``head``>` `<``body``>` `<``div` `id``=``"resizable"``></``div``>` `<``script``>` `$( "#resizable" ).resizable();` `</``script``>` `</``body``>` `</``html``>`

#### Demo: