The resizable widget of jQuery UI helps to drag and resize the selected elements.
Let’s write a code to use the Resizable widget inside a div tag.
Syntax:
$( "#my_resizable" ).resizable();
1. alsoResize: This option allows you to parallelly resize more than one widget by controlling only one widget.
Syntax:
$( ".selector" ).resizable({
alsoResize: "#my_widget"
}); |
2. animate: This option can be used to add animation to the resizing of the element.
Syntax:
$( ".selector" ).resizable({
animate: true
}); |
3. animateDuration: This field allows you to choose how long you want the animation to last.
Syntax:
$( ".selector" ).resizable({
animateDuration: "fast"
}); |
4. animateEasing: This options say what kind of easing you want at the end of the animation while resizing.
Syntax:
$( ".selector" ).resizable({
animateEasing: "easeOutBounce"
}); |
5. aspectRatio: This option takes a boolean value to decide whether a specific aspect ratio should be followed while resizing the widget.
Syntax:
$( ".selector" ).resizable({
aspectRatio: true
}); |
6. autoHide: This option also takes a boolean value which decides whether or not to hide the handle when the cursor is not hovering over the element.
Syntax:
$( ".selector" ).resizable({
autoHide: true
}); |
7. cancel: Prevents the resizing of the specific element chosen.
Syntax:
$( ".selector" ).resizable({
cancel: ".cancel"
}); |
8. classes: Used to specify additional classes to be added to the widgets. The additional classes can be chosen in the Theming Section of jQuery UI.
Syntax:
$( ".selector" ).resizable({
classes: {
"ui-resizable": "highlight"
}
}); |
9. disabled: Takes a boolean value to decide to disable the resizable widget.
Syntax:
$( ".selector" ).resizable({
disabled: true
}); |
10. helper: A class name that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized.
Syntax:
$( ".selector" ).resizable({
helper: "resizable-helper"
}); |
11. handles: Which handles can be used for resizing.
Multiple types supported:
- String: A comma-delimited list of any of the following: n, e, s, w, ne, se, sw, nw, all. The necessary handles will be auto-generated by the plugin.
- Object: The following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.
Syntax:
$( ".selector" ).resizable({
handles: "n, e, s, w"
}); |
Other important attributes:
- containment: This option is used to restrict the size of the resizable to a maximum and minimum value.
- ghost: When triggered, a semi-transparent helper element is shown for resizing.
- grid: The grid option is used to snap the resize elements in pixel elements x and y.By default its value is set to False.
- maxHeight: This option takes a number as input and specifies the maximum height to which the resizable element can be allowed to expand to.
- maxWidth: This option can be used to specify the maximum width to which the resizable element can be allowed to expand to.
- minHeight: This widget is used to specify the minimum height to which the resizable element can be allowed to be compressed to.
- minWidth: This option can be used to specify the minimum width to which the resizable element can be allowed to be compressed to.
- destroy: This option removes the tooltip widget of jquery ui and changes it to the native tooltip.
- disable: This option disables the tooltip widget.
- enable: This option enables the tooltip if it was previously disabled.
- instance: Retrieves the resizable’s instance object. If the element does not have an associated instance, undefined is returned.
- option: Gets the value of the currently associated with the option name chosen.
- widget: Returns a jQuery object containing the resizable object.
In the below example we have specified various attributes for the div tag like border, the background to differentiate between what’s inside the div tag and what’s outside the div tag.
Example 1:
<html>
<head>
<link href=
rel='stylesheet'>
<style>
#my_resizable {
height: 80px;
width: 80px;
background: #f1f1f1;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=my_resizable></div>
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#my_resizable").resizable();
})
</script>
</center>
</body>
</html>
|
Output:
alsoresize: Using the alsoresize option, we can control the size of another element by adjusting the size of the previous element. Here is an example where we adjust the size of a div tag by adjusting the size of another div tag.
Example 2:
<html>
<head>
<link href=
rel='stylesheet'>
<style>
.my_box {
height: 80px;
width: 80px;
background: #f1f1f1;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=my_resizable class=my_box></div>
<div id=my_resizable2 class=my_box></div>
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#my_resizable").resizable({
alsoResize: "#my_resizable2"
});
})
</script>
</center>
</body>
</html>
|
Output:
animate: Using the animate option we can add a animation effect to the way how the size of the element changes.We do that by setting its value to True. By default, it is set to false.
Here is a samplecode demonstrating this!
Example 3:
<html>
<head>
<link href=
rel='stylesheet'>
<style>
.my_box {
height: 80px;
width: 80px;
background: #f1f1f1;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=my_resizable class=my_box></div>
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#my_resizable").resizable({
animate: true
});
})
</script>
</center>
</body>
</html>
|
Output:
animationDuration: Using the animationDuration we can specify the speed we want the animation to take to resize the element. Here is an example of this.
Example 4:
<html>
<head>
<link href=
rel='stylesheet'>
<style>
.my_box {
height: 80px;
width: 80px;
background: #f1f1f1;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=my_resizable class=my_box></div>
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#my_resizable").resizable({
animate: true,
animateDuration: "fast"
});
})
</script>
</center>
</body>
</html>
|
Output:
animateEasing: It adds an extra effect to the animate option, you can specify the effect inside the jQuery code. We have used the “easeOutBounce”.
Example 5:
<html>
<head>
<link href=
rel='stylesheet'>
<style>
.my_box {
height: 80px;
width: 80px;
background: #f1f1f1;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=my_resizable class=my_box></div>
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#my_resizable").resizable({
animate: true,
animateEasing: "easeOutBounce"
});
})
</script>
</center>
</body>
</html>
|
Output: