YouTip

## Category (#) ## Usage **Description:** Use the mouse to change the size of an element. **Added in:** 1.0 **Dependencies:** **Note:** The jQuery UI Resizable plugin makes the selected element(s) resizable (meaning they have draggable handles). You can specify one or more handles, as well as minimum and maximum width and height. **Additional Note:** This widget requires some functional CSS to work. If you create a custom theme, use the widget's specified CSS file as a starting point. ### Quick Navigation | Options | Methods | Events | | --- | --- | --- | | (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) | (#) (#) (#) (#) (#) | (#) (#) (#) (#) | | Option | Type | Description | Default | | --- | --- | --- | --- | | alsoResize | Selector or jQuery or Element | One or more elements to resize synchronously with the resizable element. **Code examples:** Initialize a resizable with the `alsoResize` option specified: $( ".selector" ).resizable({ alsoResize: "#mirror" }); After initialization, get or set the `alsoResize` option: // gettervar alsoResize = $( ".selector" ).resizable( "option", "alsoResize" ); // setter $( ".selector" ).resizable( "option", "alsoResize", "#mirror" ); | false | | animate | Boolean | Animate to the final size after resizing. **Code examples:** Initialize a resizable with the `animate` option specified: $( ".selector" ).resizable({ animate: true }); After initialization, get or set the `animate` option: // gettervar animate = $( ".selector" ).resizable( "option", "animate" ); // setter $( ".selector" ).resizable( "option", "animate", true ); | false | | animateDuration | Number or String | Duration of the animation when using the `animate` option. **Multiple types supported:** * **Number**: Duration in milliseconds. * **String**: A named duration, such as `"slow"` or `"fast"`. **Code examples:** Initialize a resizable with the `animateDuration` option specified: $( ".selector" ).resizable({ animateDuration: "fast" }); After initialization, get or set the `animateDuration` option: // gettervar animateDuration = $( ".selector" ).resizable( "option", "animateDuration" ); // setter $( ".selector" ).resizable( "option", "animateDuration", "fast" ); | "slow" | | animateEasing | String | The (#) to use when using the `animate` option. **Code examples:** Initialize a resizable with the `animateEasing` option specified: $( ".selector" ).resizable({ animateEasing: "easeOutBounce" }); After initialization, get or set the `animateEasing` option: // gettervar animateEasing = $( ".selector" ).resizable( "option", "animateEasing" ); // setter $( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" ); | "swing" | | aspectRatio | Boolean or Number | 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**: Forces the element to maintain a specific aspect ratio while resizing. **Code examples:** Initialize a resizable with the `aspectRatio` option specified: $( ".selector" ).resizable({ aspectRatio: true }); After initialization, get or set the `aspectRatio` option: // gettervar aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" ); // setter $( ".selector" ).resizable( "option", "aspectRatio", true ); | false | | autoHide | Boolean | Whether to hide the handles when the user is not hovering over the element. **Code examples:** Initialize a resizable with the `autoHide` option specified: $( ".selector" ).resizable({ autoHide: true }); After initialization, get or set the `autoHide` option: // gettervar autoHide = $( ".selector" ).resizable( "option", "autoHide" ); // setter $( ".selector" ).resizable( "option", "autoHide", true ); | false | | cancel | Selector | Prevents resizing from starting on the specified elements. **Code examples:** Initialize a resizable with the `cancel` option specified: $( ".selector" ).resizable({ cancel: ".cancel" }); After initialization, get or set the `cancel` option: // gettervar cancel = $( ".selector" ).resizable( "option", "cancel" ); // setter $( ".selector" ).resizable( "option", "cancel", ".cancel" ); | "input, textarea, button, select, option" | | containment | Selector or Element or String | Constrains resizing to within the bounds of the specified element or region. **Multiple types supported:** * **Selector**: The resizable element will be contained within the first element matched by the selector. If no element is found, no containment is set. * **Element**: The resizable element will be contained within the element. * **String**: Possible values: `"parent"`, `"document"`. **Code examples:** Initialize a resizable with the `containment` option specified: $( ".selector" ).resizable({ containment: "parent" }); After initialization, get or set the `containment` option: // gettervar containment = $( ".selector" ).resizable( "option", "containment" ); // setter $( ".selector" ).resizable( "option", "containment", "parent" ); | false | | delay | Number | Time in milliseconds after mousedown before resizing starts. If this option is specified, resizing will only begin after the mouse has moved for the specified time. This option can prevent unnecessary resizing when clicking on an element. **Code examples:** Initialize a resizable with the `delay` option specified: $( ".selector" ).resizable({ delay: 150 }); After initialization, get or set the `delay` option: // gettervar delay = $( ".selector" ).resizable( "option", "delay" ); // setter $( ".selector" ).resizable( "option", "delay", 150 ); | 0 | | disabled | Boolean | If set to `true`, disables the resizable. **Code examples:** Initialize a resizable with the `disabled` option specified: $( ".selector" ).resizable({ disabled: true }); After initialization, get or set the `disabled` option: // gettervar disabled = $( ".selector" ).resizable( "option", "disabled" ); // setter $( ".selector" ).resizable( "option", "disabled", true ); | false | | distance | Number | Distance in pixels that the mouse must move before resizing starts. If this option is specified, resizing will only begin after the mouse has moved the specified distance. This option can prevent unnecessary resizing when clicking on an element. **Code examples:** Initialize a resizable with the `distance` option specified: $( ".selector" ).resizable({ distance: 30 }); After initialization, get or set the `distance` option: // gettervar distance = $( ".selector" ).resizable( "option", "distance" ); // setter $( ".selector" ).resizable( "option", "distance", 30 ); | 1 | | ghost | Boolean | If set to `true`, displays a semi-transparent helper element while resizing. **Code examples:** Initialize a resizable with the `ghost` option specified: $( ".selector" ).resizable({ ghost: true }); After initialization, get or set the `ghost` option: // gettervar ghost = $( ".selector" ).resizable( "option", "ghost" ); // setter $( ".selector" ).resizable( "option", "ghost", true ); | false | | grid | Array | Snaps the resizable element to a grid, every x and y pixels. The array form must be `[ x, y ]`. **Code examples:** Initialize a resizable with the `grid` option specified: $( ".selector" ).resizable({ grid: [ 20, 10 ] }); After initialization, get or set the `grid` option: // gettervar grid = $( ".selector" ).resizable( "option", "grid" ); // setter $( ".selector" ).resizable( "option", "grid", [ 20, 10 ] ); | false | | handles | String or Object | Handles available for resizing. **Multiple types supported:** * **String**: A comma-separated list of any of the following values: n, e, s, w, ne, se, sw, nw, all. The necessary handles are automatically generated by the plugin. * **Object**: Supports the following keys: { n, e, s, w, ne, se, sw, nw }. Any specified value should be a jQuery selector matching a child element of the resizable to be used as a handle. **Note:** When generating your own handles, each handle must have the `ui-resizable-handle` class and may also have the appropriate `ui-resizable-{direction}` class, such as ui-resizable-s. **Code examples:** Initialize a resizable with the `handles` option specified: $( ".selector" ).resizable({ handles: "n, e, s, w" }); After initialization, get or set the `handles` option: // gettervar handles = $( ".selector" ).resizable( "option", "handles" ); // setter $( ".selector" ).resizable( "option", "handles", "n, e, s, w" ); | "e, s, se" | | helper | String | A class name that will be added to the proxy element to illustrate the resize during handle dragging. Once resizing is complete, the original element is resized. **Code examples:** Initialize a resizable with the `helper` option specified: $( ".selector" ).resizable({ helper: "resizable-helper" }); After initialization, get or set the `helper` option: // gettervar helper = $( ".selector" ).resizable( "option", "helper" ); // setter $( ".selector" ).resizable( "option", "helper", "resizable-helper" ); | false | | maxHeight | Number | The maximum height the resizable can be resized to. **Code examples:** Initialize a resizable with the `maxHeight` option specified: $( ".selector" ).resizable({ maxHeight: 300 }); After initialization, get or set the `maxHeight` option: // gettervar maxHeight = $( ".selector" ).resizable( "option", "maxHeight" ); // setter $( ".selector" ).resizable( "option", "maxHeight", 300 ); | null | | maxWidth | Number | The maximum width the resizable can be resized to. **Code examples:** Initialize a resizable with the `maxWidth` option specified: $( ".selector" ).resizable({ maxWidth: 300 }); After initialization, get or set the `maxWidth` option: // gettervar maxWidth = $( ".selector" ).resizable( "option", "maxWidth" ); // setter $( ".selector" ).resizable( "option", "maxWidth", 300 ); | null | | minHeight | Number | The minimum height the resizable can be resized to. **Code examples:** Initialize a resizable with the `minHeight` option specified: $( ".selector" ).resizable({ minHeight: 150 }); After initialization, get or set the `minHeight` option: // gettervar minHeight = $( ".selector" ).resizable( "option", "minHeight" ); // setter $( ".selector" ).resizable( "option", "minHeight", 150 ); | 10 | | minWidth | Number | The minimum width the resizable can be resized to. **Code examples:** Initialize a resizable with the `minWidth` option specified: $( ".selector" ).resizable({ minWidth: 150 }); After initialization, get or set the `minWidth` option: // gettervar minWidth = $( ".selector" ).resizable( "option", "minWidth" ); // setter $( ".selector" ).resizable( "option", "minWidth", 150 ); | 10 | | Method | Returns | Description | | --- | --- | --- | | destroy() | jQuery (plugin only) | Completely removes the resizable functionality. This will return the element back to its pre-init state. * This method does not accept any arguments. **Code examples:** Invoke the destroy method: $( ".selector" ).resizable( "destroy" ); | | disable() | jQuery (plugin only) | Disables the resizable. * This method does not accept any arguments. **Code examples:** Invoke the disable method: $( ".selector" ).resizable( "disable" ); | | enable() | jQuery (plugin only) | Enables the resizable. * This method does not accept any arguments. **Code examples:** Invoke the enable method: $( ".selector" ).resizable( "enable" ); | | option( optionName ) | Object | Gets the value currently associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to get. **Code examples:** Invoke the method: var isDisabled = $( ".selector" ).resizable( "option", "disabled" ); | | option() | PlainObject | Gets an object containing key/value pairs representing the current resizable options hash. * This method does not accept any arguments. **Code examples:** Invoke the method: var options = $( ".selector" ).resizable( "option" ); | | option( optionName, value ) | jQuery (plugin only) | Sets the value of the resizable option associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to set. * **value** Type: Object Description: The value to set for the option. **Code examples:** Invoke the method: $( ".selector" ).resizable( "option", "disabled", true ); | | option( options ) | jQuery (plugin only) | Sets one or more options for the resizable. * **options** Type: Object Description: A map of option-value pairs to set. **Code examples:** Invoke the method: $( ".selector" ).resizable( "option", { disabled: true } ); | | widget() | jQuery | Returns a `jQuery` object containing the resizable element. * This method does not accept any arguments. **Code examples:** Invoke the widget method: var widget = $( ".selector" ).resizable( "widget" ); | | Event | Type | Description | | --- | --- | --- | | create( event, ui ) | resizecreate | Triggered when the resizable is created. * **event** Type: Event * **ui** Type: Object Note: The `ui` object is empty but included here for consistency with other events. **Code examples:** Initialize a resizable with the create callback specified: $( ".selector" ).resizable({ create: function( event, ui ) {}}); Bind an event listener to the resizecreate event: $( ".selector" ).on( "resizecreate", function( event, ui ) {} ); | | resize( event, ui ) | resize | Triggered during resizing when the resize handle is dragged. * **event** Type: Event * **ui** Type: Object * **element** Type: jQuery Description: jQuery object representing the element being resized. |