Web Development with jQuery (2015)

Resizable Methods

Method

Description

Return Value

resizable(options)

Makes the selected elements into resizable elements (see “Resizable Options”).

jQuery

resizable('destroy')

Completely removes resizable functionality.

jQuery

resizable('disable')

Temporarily disables resizable functionality.

jQuery

resizable('enable')

Enables resizable functionality.

jQuery

resizable('option')

Returns an object of all currently set options as an object of key, value pairs.

Object

resizable('option', optionName)

Returns the specified option's value.

Mixed

resizable('option', optionName,value)

Sets the specified option to the specified value.

jQuery

Resizable Options

Option

Description

Type

alsoResize

One or more elements that should be resizing simultaneously with the resizable element.
Default value: false

Selector, jQuery, Element

animate

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

Boolean

animateDuration

Duration time for animating. Accepts the time in milliseconds (ms), or one of 'slow', 'normal', or 'fast'.
Default value: 'slow'

Number, String

animateEasing

Easing effect for animation.
Default value: 'swing'

String

aspectRatio

When set to true, resizing is constrained by the original aspect ratio. If an alternative ratio is wanted, you can submit a number and then the aspect ratio will be constrained by height\width.
Default value: false

Boolean, Number

autoHide

When set to true, automatically hides the handles except when the mouse hovers over the element.
Default value: false

Boolean

cancel

Prevents resizing if you start on elements matching the selector.
Default value: 'input, textarea, button, select, option'

Selector

containment

Constrains resizing to within the bounds of the specified element. This can be a DOM element, 'parent', 'document', or a selector.
Default value: false

Boolean, Element, Selector, String

delay

Time in milliseconds (ms) to define when dragging should start. It helps prevent unwanted drags when clicking an element.
Default value: 0

Number

disabled

Disables the resizable if the value is set to true.
Default value: false

Boolean

distance

Tolerance in pixels, for when resizing should start. If specified, resizing will not start until after the mouse is moved beyond the specified distance.
Default value: 1

Number

ghost

When set to true, a substitute element is displayed while resizing.
Default value: false

Boolean

grid

Snaps the resizing element to a grid size, every x and y pixel.
Default value: false

Array[x, y]

handles

Customizes handles used for resizing.
If an object is specified the potential keys are n, e, s, w, ne, se, sw, nw, and all. Values for these keys should reference an element, selection, or jQuery object that should be used to represent that particular handle.
If a string is provided, the string is a comma separated list of the following 'n, e, s, w, ne, se, sw, nw, and all'.
Default value: 'e, s, se'

String, Object

helper

This is the CSS class that will be added to a proxy element to outline the resize during the drag of the resize handle. When the resize is complete, the original element is sized.
Default value: false

Boolean, String

maxHeight

This is the maximum height the resizable should be allowed to resize to.
Default value: null

Number

maxWidth

This is the maximum width the resizable should be allowed to resize to.
Default value: null

Number

minHeight

This is the minimum height the resizable should be allowed to resize to.
Default value: 10

Number

minWidth

This is the minimum width the resizable should be allowed to resize to.
Default value: 10

Number

Resizable Events

Option

Description

Value

create
bind('resizecreate')
on('resizecreate')

A function executed when a resizable element is created.

function(event, ui)

resize
bind('resize')
on('resize')

This function is called during the resize, on the drag of any resize handle.

function(event, ui)

start
bind('resizestart')
on('resizestart')

This function is executed when a resize starts.

function(event, ui)

stop
bind('resizestop')
on('resizestop')

This function is called at the end of a resize operation.

function(event, ui)

UI Object

Option

Description

Type

ui.element

A jQuery object representing the resizable element.

jQuery

ui.helper

A jQuery object representing the helper that's being resized.

jQuery

ui.originalElement

A jQuery object representing the original element before it was wrapped with the resizable plugin.

jQuery

ui.originalPosition

An object representing the original position with the keys left and top.

Object

ui.originalSize

An object containing the original width and height, before an element was resized.

Object

ui.position

An object containing the current position with the keys left and top.

Object

ui.size

An object containing the current size of the resizable element with the keys width and height.

Object