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 InteractionGive 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
|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 HandleGive 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 HandlesGive 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 SettingGive 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 WidgetGive 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 WidgetGive 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 WidgetGive 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 RatioGive 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 ResizableGive 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 SimultaneouslyGive 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.