The resizable () Method

The resizable () method can be used under the following two forms:

  • $(selector, context).resizable (options)

  • $(selector, context).resizable ("action", params)

The resizable (options) Method

The resizable (options) method declares that an HTML element is resizable. The options parameter is an object that specifies behavior when resizing.

Managing resizable elements

We begin with the options to manage the process of resizing (Table 13-1), to indicate which items to resize (Table 13-2), how to resize (Table 13-3), and specify constraints (Table 13-4).

Table 13-1. Options for managing resizable elements




When set to true, disables the resizing mechanism. The mouse no longer resizes elements, until the mechanism is enabled (using the resizable ("enable") instruction).


Hides the magnification icon, except when the mouse is over the item.


Delay (in milliseconds) before which the first movement of the mouse is taken into account. The displacement will begin thereafter. The default is 0.


Distance (in pixels) the mouse must move for resizing to begin. The default is 1 pixel.


Array [x, y] indicating the number of pixels that the element expands horizontally and vertically during movement of the mouse.

Table 13-2. Options for indicating which elements to resize




Selector, jQuery class object, or DOM element representing elements that also resize when resizing the original ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.