JqueryUI - Resizable
jQueryUI provides resizable() method to resize any DOM element. This method simplifies the resizing of element which otherwise takes time and lot of coding in HTML. The resizable () method displays an icon in the bottom right of the item to resize.
Syntax
The resizable() method can be used in two forms −
- $(selector, context).resizable (options) Method
- $(selector, context).resizable ("action", params) Method
$ (selector, context).resizable (options) Method
The resizable (options) method declares that an HTML element can be resized. The options parameter is an object that specifies the behavior of the elements involved when resizing.
Syntax
$(selector, context).resizable (options);
You can provide one or more options at a time of using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −
$(selector, context).resizable({option1: value1, option2: value2..... });
The following table lists the different options that can be used with this method −
| Sr.No. | Option & Description |
|---|---|
| 1 | alsoResize This option is of type Selector, jQuery , or any DOM Element. It represents elements that also resize when resizing the original object. By default its value is false. |
| 2 | animate This option when set to true is used to enable a visual effect during resizing when the mouse button is released. The default value is false (no effect). |
| 3 | animateDuration This option is used to set the duration (in milliseconds) of the resizing effect. This option is used only when animateoption is true. By default its value is "slow". |
| 4 | animateEasing This option is used to specify which easing to apply when using the animate option. By default its value is "swing". |
| 5 | aspectRatio This option is used to indicate whether to keep the aspect (height and width) ratio for the item. By default its value is false. |
| 6 | autoHide This option is used to hide the magnification icon or handles, except when the mouse is over the item. By default its value is false. |
| 7 | cancel This option is used to prevent resizing on specified elements. By default its value is input,textarea,button,select,option. |
| 8 | containment This option is used restrict the resizing of elements within a specified element or region. By default its value is false. |
| 9 | delay This option is used to set tolerance or delay in milliseconds. Resizing or displacement will begin thereafter. By default its value is 0. |
| 10 | disabled This option disables the resizing mechanism when set to true. The mouse no longer resizes elements, until the mechanism is enabled, using the resizable ("enable"). By default its value is false. |
| 11 | distance With this option, the resizing starts only when the mouse moves a distance(pixels). By default its value is 1 pixel. This can help prevent unintended resizing when clicking on an element. |
| 12 | ghost This option when set to true, a semi-transparent helper element is shown for resizing. This ghost item will be deleted when the mouse is released. By default its value is false. |
| 13 | grid This option is of type Array [x, y], indicating the number of pixels that the element expands horizontally and vertically during movement of the mouse. By default its value is false. |
| 14 | handles This option is a character string indicating which sides or angles of the element can be resized. By default its values are e, s, se. |
| 15 | helper This option is used to add a CSS class to style the element to be resized. When the element is resized a new <div> element is created, which is the one that is scaled (ui-resizable-helper class). Once the resize is complete, the original element is sized and the <div> element disappears. By default its value is false. |
| 16 | maxHeight This option is used to set the maximum height the resizable should be allowed to resize to. By default its value is null. |
| 17 | maxWidth This option is used to set the maximum width the resizable should be allowed to resize to. By default its value is null. |
| 18 | minHeight This option is used to set the minimum height the resizable should be allowed to resize to. By default its value is 10. |
| 19 | minWidth This option is used to set the minimum width the resizable should be allowed to resize to. By default its value is 10. |
The following section will show you few a working examples of resize functionality.
Default Functionality
The following example demonstrates a simple example of resizable functionality, passing no parameters to the resizable() method.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable { width: 150px; height: 150px; padding: 0.5em;
text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "resizable" class = "ui-widget-content">
<h3 class = "ui-widget-header">Pull my edges to resize me!!</h3>
</div>
</body>
</html>
Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Drag the square border to resize.
Use of animate and ghost
The following example demonstrates the usage of two options animate and ghost in the resize function of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-2,#resizable-3 {
width: 150px; height: 150px; padding: 0.5em;
text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable-2" ).resizable({
animate: true
});
$( "#resizable-3" ).resizable({
ghost: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "resizable-2" class = "ui-widget-content">
<h3 class = "ui-widget-header">
Pull my edges and Check the animation!!
</h3>
</div><br>
<div id = "resizable-3" class = "ui-widget-content">
<h3 class = "ui-widget-header">I'm ghost!!</h3>
</div>
</body>
</html>
Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Drag the square border to resize and see the effect of animate and ghost options.
Use of containment, minHeight, and minWidth
The following example demonstrates the usage of three options containment, minHeight and minWidth in the resize function of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#container-1 { width: 300px; height: 300px; }
#resizable-4 {background-position: top left;
width: 150px; height: 150px; }
#resizable-4, #container { padding: 0.5em; }
</style>
<script>
$(function() {
$( "#resizable-4" ).resizable({
containment: "#container",
minHeight: 70,
minWidth: 100
});
});
</script>
</head>
<body>
<div id = "container" class = "ui-widget-content">
<div id = "resizable-4" class = "ui-state-active">
<h3 class = "ui-widget-header">
Resize contained to this container
</h3>
</div>
</div>
</body>
</html>
Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Drag the square border to resize, you cannot resize beyond the main container.
Use of delay, distance, and autoHide
The following example demonstrates the usage of three options delay, distance and autoHide in the resize function of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.square {
width: 150px;
height: 150px;
border: 1px solid black;
text-align: center;
float: left;
margin-left: 20px;
-right: 20px;
}
</style>
<script>
$(function() {
$( "#resizable-5" ).resizable({
delay: 1000
});
$( "#resizable-6" ).resizable({
distance: 40
});
$( "#resizable-7" ).resizable({
autoHide: true
});
});
</script>
</head>
<body>
<div id = "resizable-5" class = "square ui-widget-content">
<h3 class = "ui-widget-header">
Resize starts after delay of 1000ms
</h3>
</div><br>
<div id = "resizable-6" class = "square ui-widget-content">
<h3 class = "ui-widget-header">
Resize starts at distance of 40px
</h3>
</div><br>
<div id = "resizable-7" class = "square ui-widget-content">
<h3 class = "ui-widget-header">
Hover over me to see the magnification icon!
</h3>
</div>
</body>
</html>
Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Drag the square border to resize and you can notice that −
- The first square box resizes after a delay of 1000ms,
- Second square box starts resizing after the mouse moves 40px.
- Hover the mouse on the third square box, and the magnification icon appears.
Use of alsoResize
The following example demonstrates the usage of option alsoResize in the resize function of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-8,#resizable-9{ width: 150px; height: 150px;
padding: 0.5em;text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable-8" ).resizable({
alsoResize: "#resizable-9"
});
$( "#resizable-9" ).resizable();
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "resizable-8" class = "ui-widget-content">
<h3 class = "ui-widget-header">Resize!!</h3>
</div><br>
<div id = "resizable-9" class = "ui-widget-content">
<h3 class = "ui-widget-header">I also get resized!!</h3>
</div>
</body>
</html>
Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Drag the square border to resize and you can notice that the second square box also resizes with the first square box.
Use of AspectRatio, Grid
The following example demonstrates the usage of option aspectRatio and grid in the resize function of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.square {
width: 150px;
height: 150px;
border: 1px solid black;
text-align: center;
float: left;
margin-left: 20px;
margin-right: 20px;
}
</style>
<script>
$(function() {
$( "#resizable-10" ).resizable({
aspectRatio: 10 / 3
});
$( "#resizable-11" ).resizable({
grid: [50,20]
});
});
</script>
</head>
<body>
<div id = "resizable-10" class = "square ui-widget-content">
<h3 class = "ui-widget-header">
Resize with aspectRatio of 10/3
</h3>
</div>
<div id = "resizable-11" class = "square ui-widget-content">
<h3 class = "ui-widget-header">
Snap me to the grid of [50,20]
</h3>
</div>
</body>
</html>
Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Drag the square border to resize, the first square box resizes with the aspect ratio of 10 / 3 and the second one resizes with grid of [50,20].
$ (selector, context).resizable ("action", params) Method
The resizable ("action", params) method can perform an action on resizable elements, such as allowing or preventing resizing functionality. The action is specified as a string in the first argument (e.g., "disable" to prevent the resize). Check out the actions that can be passed, in the following table.
Syntax
$(selector, context).resizable ("action", params);;The following table lists the different actions that can be used with this method −
| Sr.No. | Action & Description |
|---|---|
| 1 | destroy This action destroys the resizable functionality of an element completely. This will return the element back to its pre-init state. |
| 2 | disable This action disables the resizing functionality of an element. This method does not accept any arguments. |
| 3 | enable This action enables the resizing functionality of an element. This method does not accept any arguments. |
| 4 | option( optionName ) This action retrieves the value of the specified optionName. This option corresponds to one of those used with resizable (options). |
| 5 | option() Gets an object containing key/value pairs representing the current resizable options hash. This does not accept any arguments. |
| 6 | option(optionName, value ) This action sets the value of the resizable option with the specified optionName. This option corresponds to one of those used with resizable (options). |
| 7 | option( options ) This action sets one or more options for the resizable. |
| 8 | widget() This action returns a jQuery object containing the resizable element. This method does not accept any arguments. |
Example
Now let us see an example using the actions from the above table. The following example demonstrates the use of destroy() and disable() methods.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-12,#resizable-13 { width: 150px; height: 150px;
padding: 0.5em;text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable-12" ).resizable();
$( "#resizable-12" ).resizable('disable');
$( "#resizable-13" ).resizable();
$( "#resizable-13" ).resizable('destroy');
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "resizable-12" class = "ui-widget-content">
<h3 class = "ui-widget-header">I'm disable!!</h3>
</div><br>
<div id = "resizable-13" class = "ui-widget-content">
<h3 class = "ui-widget-header">I'm Destroyed!!</h3>
</div>
</body>
</html>
Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, you should see the following output −
You cannot resize the first square box as its disabled and the second square box is destroyed.
Event Management on resizable elements
In addition to the resizable (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −
| Sr.No. | Event Method & Description |
|---|---|
| 1 | create(event, ui) This event is triggered when the resizable element is created. |
| 2 | resize(event, ui) This event is triggered when the handler of resizable element is dragged. |
| 3 | start(event, ui) This event is triggered at the start of a resize operation. |
| 4 | stop(event, ui) This event is triggered at the end of a resize operation. |
Example
The following example demonstrates the event method usage during resize functionality. This example demonstrates the use of events create, and resize.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-14{ width: 150px; height: 150px;
padding: 0.5em;text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable-14" ).resizable({
create: function( event, ui ) {
$("#resizable-15").text ("I'm Created!!");
},
resize: function (event, ui) {
$("#resizable-16").text ("top = " + ui.position.top +
", left = " + ui.position.left +
", width = " + ui.size.width +
", height = " + ui.size.height);
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "resizable-14" class = "ui-widget-content">
<h3 class = "ui-widget-header">Resize !!</h3>
</div><br>
<span id = "resizable-15"></span><br>
<span id = "resizable-16"></span>
</body>
</html>
Let us save the above code in an HTML file resizeexample.htm and open it in a standard browser which supports javascript, should must see the following output −
Drag the square box and you will see the output getting displayed on resize event.