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.
Dependencies
- UI Core
- Widget Factory
- Mouse Interaction
- 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.
false
Code examples:
Initialize the resizable with the alsoResize
option specified:
$( ".selector" ).resizable({ alsoResize: "#mirror" });
Get or set the alsoResize
option, after initialization:
// Getter var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" ); // Setter $( ".selector" ).resizable( "option", "alsoResize", "#mirror" );
false
Code examples:
Initialize the resizable with the animate
option specified:
$( ".selector" ).resizable({ animate: true });
Get or set the animate
option, after initialization:
// Getter var animate = $( ".selector" ).resizable( "option", "animate" ); // Setter $( ".selector" ).resizable( "option", "animate", true );
"slow"
animate
option.Multiple types supported:
- Number: Duration in milliseconds.
- String: A named duration, such as
"slow"
or"fast"
.
Code examples:
Initialize the resizable with the animateDuration
option specified:
$( ".selector" ).resizable({ animateDuration: "fast" });
Get or set the animateDuration
option, after initialization:
// Getter var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" ); // Setter $( ".selector" ).resizable( "option", "animateDuration", "fast" );
"swing"
Code examples:
Initialize the resizable with the animateEasing
option specified:
$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
Get or set the animateEasing
option, after initialization:
// Getter var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" ); // Setter $( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" );
false
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.
Code examples:
Initialize the resizable with the aspectRatio
option specified:
$( ".selector" ).resizable({ aspectRatio: true });
Get or set the aspectRatio
option, after initialization:
// Getter var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" ); // Setter $( ".selector" ).resizable( "option", "aspectRatio", true );
false
Code examples:
Initialize the resizable with the autoHide
option specified:
$( ".selector" ).resizable({ autoHide: true });
Get or set the autoHide
option, after initialization:
// Getter var autoHide = $( ".selector" ).resizable( "option", "autoHide" ); // Setter $( ".selector" ).resizable( "option", "autoHide", true );
"input,textarea,button,select,option"
Code examples:
Initialize the resizable with the cancel
option specified:
$( ".selector" ).resizable({ cancel: ".cancel" });
Get or set the cancel
option, after initialization:
// Getter var cancel = $( ".selector" ).resizable( "option", "cancel" ); // Setter $( ".selector" ).resizable( "option", "cancel", ".cancel" );
false
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"
.
Code examples:
Initialize the resizable with the containment
option specified:
$( ".selector" ).resizable({ containment: "parent" });
Get or set the containment
option, after initialization:
// Getter var containment = $( ".selector" ).resizable( "option", "containment" ); // Setter $( ".selector" ).resizable( "option", "containment", "parent" );
0
Code examples:
Initialize the resizable with the delay
option specified:
$( ".selector" ).resizable({ delay: 150 });
Get or set the delay
option, after initialization:
// Getter var delay = $( ".selector" ).resizable( "option", "delay" ); // Setter $( ".selector" ).resizable( "option", "delay", 150 );
false
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 );
1
Code examples:
Initialize the resizable with the distance
option specified:
$( ".selector" ).resizable({ distance: 30 });
Get or set the distance
option, after initialization:
// Getter var distance = $( ".selector" ).resizable( "option", "distance" ); // Setter $( ".selector" ).resizable( "option", "distance", 30 );
false
true
, a semi-transparent helper element is shown for resizing.Code examples:
Initialize the resizable with the ghost
option specified:
$( ".selector" ).resizable({ ghost: true });
Get or set the ghost
option, after initialization:
// Getter var ghost = $( ".selector" ).resizable( "option", "ghost" ); // Setter $( ".selector" ).resizable( "option", "ghost", true );
false
[ x, y ]
.Code examples:
Initialize the resizable with the grid
option specified:
$( ".selector" ).resizable({ grid: [ 20, 10 ] });
Get or set the grid
option, after initialization:
// Getter var grid = $( ".selector" ).resizable( "option", "grid" ); // Setter $( ".selector" ).resizable( "option", "grid", [ 20, 10 ] );
"e, s, se"
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.
Note: When generating your own handles, each handle must have the
ui-resizable-handle
class, as well as the appropriateui-resizable-{direction}
class, .e.g.,ui-resizable-s
.
Code examples:
Initialize the resizable with the handles
option specified:
$( ".selector" ).resizable({ handles: "n, e, s, w" });
Get or set the handles
option, after initialization:
// Getter var handles = $( ".selector" ).resizable( "option", "handles" ); // Setter $( ".selector" ).resizable( "option", "handles", "n, e, s, w" );
false
Code examples:
Initialize the resizable with the helper
option specified:
$( ".selector" ).resizable({ helper: "resizable-helper" });
Get or set the helper
option, after initialization:
// Getter var helper = $( ".selector" ).resizable( "option", "helper" ); // Setter $( ".selector" ).resizable( "option", "helper", "resizable-helper" );
null
Code examples:
Initialize the resizable with the maxHeight
option specified:
$( ".selector" ).resizable({ maxHeight: 300 });
Get or set the maxHeight
option, after initialization:
// Getter var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" ); // Setter $( ".selector" ).resizable( "option", "maxHeight", 300 );
null
Code examples:
Initialize the resizable with the maxWidth
option specified:
$( ".selector" ).resizable({ maxWidth: 300 });
Get or set the maxWidth
option, after initialization:
// Getter var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" ); // Setter $( ".selector" ).resizable( "option", "maxWidth", 300 );
10
Code examples:
Initialize the resizable with the minHeight
option specified:
$( ".selector" ).resizable({ minHeight: 150 });
Get or set the minHeight
option, after initialization:
// Getter var minHeight = $( ".selector" ).resizable( "option", "minHeight" ); // Setter $( ".selector" ).resizable( "option", "minHeight", 150 );
10
Code examples:
Initialize the resizable with the minWidth
option specified:
$( ".selector" ).resizable({ minWidth: 150 });
Get or set the minWidth
option, after initialization:
// Getter var minWidth = $( ".selector" ).resizable( "option", "minWidth" ); // Setter $( ".selector" ).resizable( "option", "minWidth", 150 );
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).resizable( "destroy" );
- This method does not accept any arguments.
Invoke the disable method:
$( ".selector" ).resizable( "disable" );
- This method does not accept any arguments.
Invoke the enable method:
$( ".selector" ).resizable( "enable" );
Retrieves the resizable's instance object. If the element does not have an associated instance, undefined
is returned.
Unlike other widget methods, instance()
is safe to call on any element after the resizable plugin has loaded.
- This method does not accept any arguments.
Invoke the instance method:
$( ".selector" ).resizable( "instance" );
Gets the value currently associated with the specified optionName
.
Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar"
would get the value of the bar
property on the foo
option.
- optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
- This signature does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).resizable( "option" );
Sets the value of the resizable option associated with the specified optionName
.
Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName
. For example, "foo.bar"
would update only the bar
property of the foo
option.
- optionNameType: StringThe name of the option to set.
- valueType: ObjectA value to set for the option.
Invoke the method:
$( ".selector" ).resizable( "option", "disabled", true );
- optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).resizable( "option", { disabled: true } );
jQuery
object containing the resizable element. - This method does not accept any arguments.
Invoke the widget method:
var widget = $( ".selector" ).resizable( "widget" );
resizecreate
Note: The ui
object is empty but included for consistency with other events.
Initialize the 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
- eventType: Event
- uiType: Object
- elementType: jQueryThe jQuery object representing the element to be resized
- helperType: jQueryThe jQuery object representing the helper that's being resized
- originalElementType: jQueryThe jQuery object representing the original element before it is wrapped
- originalPositionType: ObjectThe position represented as
{ left, top }
before the resizable is resized - originalSizeType: ObjectThe size represented as
{ width, height }
before the resizable is resized - positionType: ObjectThe current position represented as
{ left, top }
. The values may be changed to modify where the element will be positioned. Useful for custom resizing logic. - sizeType: ObjectThe current size represented as
{ width, height }
. The values may be changed to modify where the element will be positioned. Useful for custom resizing logic.
-
Initialize the resizable with the resize callback specified:
$( ".selector" ).resizable({ resize: function( event, ui ) {} });
Bind an event listener to the resize event:
$( ".selector" ).on( "resize", function( event, ui ) {} );
Restrict height resizing to 30 pixel increments:
$( ".selector" ).resizable({ resize: function( event, ui ) { ui.size.height = Math.round( ui.size.height / 30 ) * 30; } });
resizestart
- eventType: Event
- uiType: Object
- elementType: jQueryThe jQuery object representing the element to be resized
- helperType: jQueryThe jQuery object representing the helper that's being resized
- originalElementType: jQueryThe jQuery object representing the original element before it is wrapped
- originalPositionType: ObjectThe position represented as
{ left, top }
before the resizable is resized - originalSizeType: ObjectThe size represented as
{ width, height }
before the resizable is resized - positionType: ObjectThe current position represented as
{ left, top }
- sizeType: ObjectThe current size represented as
{ width, height }
-
Initialize the resizable with the start callback specified:
$( ".selector" ).resizable({ start: function( event, ui ) {} });
Bind an event listener to the resizestart event:
$( ".selector" ).on( "resizestart", function( event, ui ) {} );
resizestop
- eventType: Event
- uiType: Object
- elementType: jQueryThe jQuery object representing the element to be resized
- helperType: jQueryThe jQuery object representing the helper that's being resized
- originalElementType: jQueryThe jQuery object representing the original element before it is wrapped
- originalPositionType: ObjectThe position represented as
{ left, top }
before the resizable is resized - originalSizeType: ObjectThe size represented as
{ width, height }
before the resizable is resized - positionType: ObjectThe current position represented as
{ left, top }
- sizeType: ObjectThe current size represented as
{ width, height }
-
Initialize the resizable with the stop callback specified:
$( ".selector" ).resizable({ stop: function( event, ui ) {} });
Bind an event listener to the resizestop event:
$( ".selector" ).on( "resizestop", function( event, ui ) {} );
A simple jQuery UI Resizable.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>resizable demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <style> #resizable { width: 100px; height: 100px; background: #ccc; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> </head> <body> <div id="resizable"></div> <script> $( "#resizable" ).resizable(); </script> </body> </html>
Please login to continue.