jQuery UI Resizable

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.

All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object. The ui object has the following fields:

ui.helper - a jQuery object containing the helper element
ui.originalPosition - {top, left} before resizing started
ui.originalSize - {width, height} before resizing started
ui.position - {top, left} current position
ui.size - {width, height} current size

Dependencies

UI Core

A simple jQuery UI Resizable.

$("#resizable").resizable();

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
    #resizable { width: 100px; height: 100px; background: silver; }
  </style>
  <script>
  $(document).ready(function() {
    $("#resizable").resizable();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="resizable"></div>

</body>
</html>

disabled

Type:

Boolean

Default:

false

Disables (true) or enables (false) the resizable. Can be set when initialising (first creating) the resizable.
Code examples
Initialize a resizable with the disabled option specified.
```
$( ".selector" ).resizable({ disabled: true });
```
Get or set the disabled option, after init.
```
//getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
//setter
$( ".selector" ).resizable( "option", "disabled", true );
```
alsoResize

Type:

Selector, jQuery, Element

Default:

false

Resize these elements synchronous when resizing.
Code examples
Initialize a resizable with the alsoResize option specified.
```
$( ".selector" ).resizable({ alsoResize: '.other' });
```
Get or set the alsoResize option, after init.
```
//getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
//setter
$( ".selector" ).resizable( "option", "alsoResize", '.other' );
```

animate

Type:: Boolean
Default:: false

Animates to the final size after resizing.

Code examples

Initialize a resizable with the animate option specified.

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

Get or set the animate option, after init.

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

animateDuration

Type:

Integer, String

Default:

'slow'

Duration time for animating, in milliseconds. Other possible values: 'slow', 'normal', 'fast'.
Code examples
Initialize a resizable with the animateDuration option specified.
```
$( ".selector" ).resizable({ animateDuration: 500 });
```
Get or set the animateDuration option, after init.
```
//getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
//setter
$( ".selector" ).resizable( "option", "animateDuration", 500 );
```

animateEasing

Type:: String
Default:: 'swing'

Easing effect for animating.

Code examples

Initialize a resizable with the animateEasing option specified.

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

Get or set the animateEasing option, after init.

//getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
//setter
$( ".selector" ).resizable( "option", "animateEasing", 'swing' );

aspectRatio

Type:

Boolean, Float

Default:

false

If set to true, resizing is constrained by the original aspect ratio. Otherwise a custom aspect ratio can be specified, such as 9 / 16, or 0.5.
Code examples
Initialize a resizable with the aspectRatio option specified.
```
$( ".selector" ).resizable({ aspectRatio: .75 });
```
Get or set the aspectRatio option, after init.
```
//getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
//setter
$( ".selector" ).resizable( "option", "aspectRatio", .75 );
```
autoHide

Type:

Boolean

Default:

false

If set to true, automatically hides the handles except when the mouse hovers over the element.
Code examples
Initialize a resizable with the autoHide option specified.
```
$( ".selector" ).resizable({ autoHide: true });
```
Get or set the autoHide option, after init.
```
//getter
var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
//setter
$( ".selector" ).resizable( "option", "autoHide", true );
```
cancel

Type:

Selector

Default:

':input,option'

Prevents resizing if you start on elements matching the selector.
Code examples
Initialize a resizable with the cancel option specified.
```
$( ".selector" ).resizable({ cancel: ':input,option' });
```
Get or set the cancel option, after init.
```
//getter
var cancel = $( ".selector" ).resizable( "option", "cancel" );
//setter
$( ".selector" ).resizable( "option", "cancel", ':input,option' );
```
containment

Type:

String, Element, Selector

Default:

false

Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document', a DOMElement, or a Selector.
Code examples
Initialize a resizable with the containment option specified.
```
$( ".selector" ).resizable({ containment: 'parent' });
```
Get or set the containment option, after init.
```
//getter
var containment = $( ".selector" ).resizable( "option", "containment" );
//setter
$( ".selector" ).resizable( "option", "containment", 'parent' );
```
delay

Type:

Integer

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.
Code examples
Initialize a resizable with the delay option specified.
```
$( ".selector" ).resizable({ delay: 20 });
```
Get or set the delay option, after init.
```
//getter
var delay = $( ".selector" ).resizable( "option", "delay" );
//setter
$( ".selector" ).resizable( "option", "delay", 20 );
```
distance

Type:

Integer

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.
Code examples
Initialize a resizable with the distance option specified.
```
$( ".selector" ).resizable({ distance: 20 });
```
Get or set the distance option, after init.
```
//getter
var distance = $( ".selector" ).resizable( "option", "distance" );
//setter
$( ".selector" ).resizable( "option", "distance", 20 );
```
ghost

Type:

Boolean

Default:

false

If set to true, a semi-transparent helper element is shown for resizing.
Code examples
Initialize a resizable with the ghost option specified.
```
$( ".selector" ).resizable({ ghost: true });
```
Get or set the ghost option, after init.
```
//getter
var ghost = $( ".selector" ).resizable( "option", "ghost" );
//setter
$( ".selector" ).resizable( "option", "ghost", true );
```
grid

Type:

Array

Default:

false

Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y]
Code examples
Initialize a resizable with the grid option specified.
```
$( ".selector" ).resizable({ grid: [50, 50] });
```
Get or set the grid option, after init.
```
//getter
var grid = $( ".selector" ).resizable( "option", "grid" );
//setter
$( ".selector" ).resizable( "option", "grid", [50, 50] );
```
handles

Type:

String, Object

Default:

'e, s, se'

If specified as a string, should be a comma-split 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.
If specified as an 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.
Code examples
Initialize a resizable with the handles option specified.
```
$( ".selector" ).resizable({ handles: 'n, e, s, w' });
```
Get or set the handles option, after init.
```
//getter
var handles = $( ".selector" ).resizable( "option", "handles" );
//setter
$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );
```
helper

Type:

String

Default:

false

This is the css class 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.
Code examples
Initialize a resizable with the helper option specified.
```
$( ".selector" ).resizable({ helper: 'ui-state-highlight' });
```
Get or set the helper option, after init.
```
//getter
var helper = $( ".selector" ).resizable( "option", "helper" );
//setter
$( ".selector" ).resizable( "option", "helper", 'ui-state-highlight' );
```
maxHeight

Type:

Integer

Default:

null

This is the maximum height the resizable should be allowed to resize to.
Code examples
Initialize a resizable with the maxHeight option specified.
```
$( ".selector" ).resizable({ maxHeight: 300 });
```
Get or set the maxHeight option, after init.
```
//getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
//setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );
```
maxWidth

Type:

Integer

Default:

null

This is the maximum width the resizable should be allowed to resize to.
Code examples
Initialize a resizable with the maxWidth option specified.
```
$( ".selector" ).resizable({ maxWidth: 250 });
```
Get or set the maxWidth option, after init.
```
//getter
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
//setter
$( ".selector" ).resizable( "option", "maxWidth", 250 );
```
minHeight

Type:

Integer

Default:

10

This is the minimum height the resizable should be allowed to resize to.
Code examples
Initialize a resizable with the minHeight option specified.
```
$( ".selector" ).resizable({ minHeight: 150 });
```
Get or set the minHeight option, after init.
```
//getter
var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
//setter
$( ".selector" ).resizable( "option", "minHeight", 150 );
```
minWidth

Type:

Integer

Default:

10

This is the minimum width the resizable should be allowed to resize to.
Code examples
Initialize a resizable with the minWidth option specified.
```
$( ".selector" ).resizable({ minWidth: 75 });
```
Get or set the minWidth option, after init.
```
//getter
var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
//setter
$( ".selector" ).resizable( "option", "minWidth", 75 );
```

start

Type:

resizestart

This event is triggered at the start of a resize operation.
Code examples
Supply a callback function to handle the start event as an init option.
```
$( ".selector" ).resizable({
   start: function(event, ui) { ... }
});
```
Bind to the start event by type: resizestart.
```
$( ".selector" ).bind( "resizestart", function(event, ui) {
  ...
});
```
resize

Type:

resize

This event is triggered during the resize, on the drag of the resize handler.
Code examples
Supply a callback function to handle the resize event as an init option.
```
$( ".selector" ).resizable({
   resize: function(event, ui) { ... }
});
```
Bind to the resize event by type: resize.
```
$( ".selector" ).bind( "resize", function(event, ui) {
  ...
});
```
stop

Type:

resizestop

This event is triggered at the end of a resize operation.
Code examples
Supply a callback function to handle the stop event as an init option.
```
$( ".selector" ).resizable({
   stop: function(event, ui) { ... }
});
```
Bind to the stop event by type: resizestop.
```
$( ".selector" ).bind( "resizestop", function(event, ui) {
  ...
});
```

destroy

Signature:

.resizable( "destroy" )

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

Signature:

.resizable( "disable" )

Disable the resizable.
enable

Signature:

.resizable( "enable" )

Enable the resizable.
option

Signature:

.resizable( "option" , optionName , [value] )

Get or set any resizable option. If no value is specified, will act as a getter.
option

Signature:

.resizable( "option" , options )

Set multiple resizable options at once by providing an options object.
widget

Signature:

.resizable( "widget" )

Returns the .ui-resizable element.

The jQuery UI Resizable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.resizable.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

Note: This is a sample of markup generated by the resizable plugin, not markup you should use to create a resizable. The only markup needed for that is <div></div>.

jQuery UI Resizable

Overview

Dependencies

Example

Options

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples

Methods

Theming

Sample markup with jQuery UI CSS Framework classes