Search within TutorialsPark

jQuery UI : Resizeable Interaction


Learn how to use jQuery UI Resizeable Interaction to resize elements using drag handles.


jQuery UI Resizeable Interaction : Applying Resizables

The jQuery UI Resizeable Interaction is used to add drag handlers to an element, that can be used to resize the element by the user.

Some browsers automatically apply resize drag handles to text areas in the document, but you use this feature to apply resizable to any element in the document.

In the demo, we use the two div element containing img and text elements, then we apply the class resizeable along with the setting alsoResize to resize the element both horizontally and verically.

Example: jQuery UI Resizeable Interaction - Applying Resizable Interaction

Give it a TRY! » Note:Use the drag handle to alter the dimensions of the resizable Widget.


jQuery UI Resizeable Interaction : Configurations

The jQuery UI Resizeable Interaction provides multiple options to configure the Resizeable Interaction Widget

The Resizeable Interaction also depends upon the draggable Interactions, hence in addition to these settings, the draggable settings of delay, distance, grid and containment can also be used.

Table: jQuery UI Selectable Interactions Configurations

Settings Description
alsoResize To Automatically resize the specified element at the same time as the resizeable Element. Default value is false, i.e no elements are resized.
animate To animate the resizeable element as per the settings to its new dimensions. The default value is false i.e no animation.
animateDuration To specify the speed of animation in milliseconds. Values can in terms of integer or string values of slow, normal or fast. Default value is false
animateEasing To add easing effects to resize animation, the default value is swing
aspectRatio When set to true, the element's aspect ratio is preserved when the element is resized.The default value is false.
autoHide When set to true, the drag handles are visible only when the mouse pointer hovers over the resizeable element. The default value is false, i.e the drag handles are visible always.
cancel To stop specified element from being resized.
containment To constrain the resizable elements within the specified container element.Default value is false, i.e no containment.
delay To insert a delay in milliseconds when the mouse pointer is clicked on a resizable handle to when the resizing starts. Default value is 0 i.e no delay
disabled To disable the resizeable Element. The default value is false
distance To specify the number of pixels the mouse pointer must move with the mouse button pushed down before the resizing starts. Default value is 1 pixels
ghost To display a semi-transparent helper element while the resizing is in progress. Default value is false, i.e no ghosts.
grid To snap the resize to imaginary grid lines while the resizing is in progress.Default value is false.
handles To specify where the drag handles will be placed on the resizable element.
helper To add a class name to the helper element that is used using during the resizing process.Default value is false, i.e no helper.
maxHeight To set the maximum height limit of the resizable element upto which it can be changed.
maxWidth To set the maximum width limit of the resizable element upto which it can be changed.
minHeight To set the minimum height limit of the resizable element upto which it can be changed.
minWidth To set the minimum width limit of the resizable element upto which it can be changed.

jQuery UI Resizeable Interaction : Configuring the resize Handles

The jQuery UI Resizeable Interaction configuration option of handles is used to specify which handle we wish to add to our target element.

In the demo below, we have set the value of setting handles to all, which allows you use any edge/corner to resize the element.

Example: jQuery UI Resizeable Interaction - Configuring the Resize Handle

Give it a TRY! » Note: Drag from any end to resize the element


jQuery UI Resizable Interaction : Using Image Handles

The jQuery UI Resizeable Interaction setting of handles can be used along with CSS rules to provide your own image as resize handler.

In the demo, we use a single image containing copies of the standard bottom-right image and then use this image by flipping and reversing it over other edges of the element.Since, in the last demo, though the element was resizable from all the edges, there was no visual clue available from the same.

To target individual corners and edges, we use a combination of compass point to specify directions (n, e, s, w, ne, se, nw, sw) eg north, east , south etc.The setting autoHide is used to hide resize handler until mouse pointer hovers over resizeable element.

Example: jQuery UI Resizable Interaction - Adding Additional Image Handles

Give it a TRY! » Note: For better results use a single image or sprite, inorder to reduce load times.


jQuery UI Resizable Interaction : AutoHide Configuration

The jQuery UI Resizable Interaction settings of autoHide when set to true hides all resize handles until mouse pointer moves over the resizable element.

This is feature is used to minimize the effects of DOM elements over the content within the resizable element.

Example: jQuery UI Sortable Interaction autoHide Setting

Give it a TRY! » Note: Hover the mouse pointer over the resizable to see the handles displayed, and hidden when mouse pointer is removed.


jQuery UI Resizable Interaction : Setting the Size Limits of Resizable

The jQuery UI Resizable Interaction settings can be used to limit the maximum and minimum sizes that the element can be resized.For that purpose four configurations are available maxWidth, maxHeight, minWidth and minHeight

In the demo, we have used the dimension-boundary options to set the maximum and minimum width and height that the target resizable can be set to. These options accept pixel values in simple integers.

Example: jQuery UI Sortable Interaction Compatibility of Multiple Widget

Give it a TRY! » Note: You can also use overflow: auto inorder to add a scroll bar incase large content.


jQuery UI Resizable Interaction : Resizing Ghosts

The jQuery UI Resizable Interaction allows you to use Ghost elements, which are semi-transparent helper element, it is same as the proxy element used with draggable Interaction.

In the demo, we have set the value of option ghost to true, the ghost is basically a clone of the resizable element, but the opacity is just 0.25 (i.e one quarter) of the original.

Example: jQuery UI Sortable Interaction Compatibility of Multiple Widget

Give it a TRY! » Note: Styling is done on the Resizable using CSS properties.


jQuery UI Resizable Interaction : Containment of Resize

The jQuery UI Resizable Interaction has setting to ensure that the element resized is always contained within its parent element, so that other contents on the page do not move all over the page while resizing of any element.

In the demo, we have used a container element and set the image element as the resizable, and the value of option containment is set to class .myContainer

Example: jQuery UI Sortable Interaction Compatibility of Multiple Widget

Give it a TRY! » Note: The image cannot be resized to size larger than the container.


jQuery UI Resizable Interaction : Setting Aspect Ratio

The jQuery UI Resizable Interaction can be used to manually set the aspect ratio of the resizable element, using the option aspectRatio.

The value of option aspectRatio set to true ensures that the orginal aspect ratio is maintained, you can also set a custom value by using floating values, eg 0.5 means the image's value along X axis is half of the X axis.

Example: jQuery UI Resizable Interaction Setting the Aspect Ratio

Give it a TRY! » Note: While manipulating the aspect ratio of image, container sizes must be kept in proportion


jQuery UI Resizable Interaction : Animating the Resizable

The jQuery UI Resizable Interaction can be animated using three configuration settings, animate, animateDuration and animateEasing , by default these animations are switched off

We enable the animation by setting the value of animate to true The speed of the animation is set using the setting animateDuration, the value of which is duration in milliseconds.

Example: jQuery UI Resizable Interaction Animating the Resizable

Give it a TRY! » Note: While resizing, the new dimensions will be set smoothly


jQuery UI Resizable Interaction : Resizing Simultaneously

The jQuery UI Resizable Interaction setting of alsoResize is used to match element to be resized simultaneously at the same time as the resizeable element.By default it is set to false, i.e no resize

In the demo, the value assigned to the setting alsoResize is a selector

Example: jQuery UI Resizable Interaction Resizing Simultaneously

Give it a TRY! » Note:The second element is resized simultaneously with the first element.


jQuery UI Resizable Interaction : Prevent Unwanted Resizing

The jQuery UI Resizable Interaction provides setting to differentiate between clicks and real dragging. For that purpose two options are available, delay and distance.

The option delay is used to set the number of milliseconds after clicking on resize handle before resizing begins. Similarly, distance specifies the distance the mouse pointer move before resizing happens.

Example: jQuery UI Resizable Interaction Prevent Unwanted Resizing

Give it a TRY! » Note: The values of these properties should be set as low as possible.