The jQueryUI provides property called resizable() method which specifies whether element can be resizable or not by the user. The resizable plugin makes selected elements resizable by using icon which is at the bottom right of the element to resize.
also read:
The resizable method can be used in the following forms:
- $(selector, context).resizable(options)
- $(selector, context). resizable (“actions”, [params])
The following is a simple example of resizable widget:
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#resizeMe {
width: 150px;
height:150px;
padding:0.5em;
background:orange;
text-align:center;
font-weight: bold;
}
</style>
<script type="text/javascript">
$(function () {
$('#resizeMe').resizable();
});
</script>
</head>
<body>
<div id="resizeMe">
<p>Resize Me</p>
</div>
</body>
</html>
Resizable Widget Options
The resizable widget contains some options which are shown in the following table:
| Option | Description | Default Value |
|---|---|---|
| alsoResize | It is used to resize the multiple elements with resizable element simultaneously. | false |
| animate | It enables the final size after resizing when the mouse button is released. | false |
| animateDuration | It determines duration of the resizing effect in milliseconds and used only when it is set to true. | slow |
| animateEasing | It indicates which easing should be applied when using the animate option. | swing |
| aspectRatio | It determines whether to keep height and width ratio for the element. | false |
| autoHide | It hides the icon or handles, when user is not hovering over the element. | false |
| cancel | It stops resizing on specified elements. | input, textarea, button, select, option |
| containment | It resizes the specified element within bounds of the region. | false |
| delay | It specifies the delay time in milliseconds when the resizing begins. | 0 |
| disabled | It disables the resizing of elements when it is set to true i.e. it stops resizing the elements. | false |
| distance | It determines the displacement when resizing starts in the form of pixels | 1 |
| ghost | It is a semi-transparent helper element, is shown for resizing when it set to true. | false |
| grid | It snaps the resizing elements to grid system with x and y pixels in the form of [x,y]. | false |
| handles | The handle which starts resizing of elements. | e, s, se |
| helper | It provides helper element for resizing element and adds proxy element during the drag of resize handle. | false |
| maxHeight | It defines maximum height the element should be resized. | null |
| maxWidth | It defines maximum width the element should be resized. | null |
| minHeight | It defines minimum height the element is allowed to resize. | 10 |
| minWidth | It defines minimum width the element is allowed to resize. | 10 |
The following example demonstrates usage of animate, helper, ghost and autoHide options in the jQueryUI resize function:
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#resizeMe1, #resizeMe2, #resizeMe3{
width: 150px;
height:150px;
padding:0.5em;
background:orange;
text-align:center;
font-weight: bold;
float:left;
margin-left: 20px;
}
.helper {
border: 2px solid green;
}
</style>
<script type="text/javascript">
$(function () {
$('#resizeMe1').resizable({
animate:true,
helper: "helper"
});
$('#resizeMe2').resizable({
ghost:true
});
$('#resizeMe3').resizable({
autoHide:true
});
});
</script>
</head>
<body>
<div id="resizeMe1">
This is animate!!!
</div><br>
<div id="resizeMe2">
This is ghost!!!
</div><br>
<div id="resizeMe3">
Hover to see magnification icon at the bottom right corner!!!
</div>
</body>
</html>
- The above script makes use of resizable options such as animate, helper, ghost and autoHide.
- The animate option enables the final size after resizing when the mouse button is released.
- The helper option provides helper element for resizing element and adds proxy element during the drag of resize handle. Here, helper element gives green color border while resizing the element.
- The ghost option displays semi-transparent helper element which will be shown while resizing the element.
- The autoHide option hides the icon, when user is not hovering over the element. When we hover on the element, we could see the icon at bottom of right corner through which we can resize the element.
- All the above options use different ID selector within the div element and provides different CSS styles using these ID selectors as shown in the above script.
The following example demonstrates usage of containment, minHeight and minWidth options:
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#resizeMe1{
width: 100px;
height:100px;
padding:0.5em;
background:orange;
text-align:center;
font-weight: bold;
float:left;
margin-left: 20px;
}
#container{
width:400px;
height:200px;
border:2px solid orange;
float:left;
padding:0.5em;
}
</style>
<script type="text/javascript">
$(function () {
$('#resizeMe1').resizable({
containment: "#container",
minHeight: 40,
minWidth: 70
});
});
</script>
</head>
<body>
<h2>jQueryUI Example using Options</h2>
<div id="container">
<div id="resizeMe1">
Resize within the container!!!
</div>
</div>
</body>
</html>
- The above script uses some of the resizable options such as containment, minHeight and minWidth.
- The containment option which resizes the specified element within bounds of the region.
- The minHeight and minWidth options define minimum height and minimum width, which specifies the element, should be resized with given values.
JQuery Resizable Options Demo1
The following example demonstrates usage of alsoResize option:
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#resizeMe1,#resizeMe2{
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
float: left;
margin-left: 10px;
background-color: lightblue;
}
</style>
<script type="text/javascript">
$(function (){
$("#resizeMe1").resizable({
alsoResize: "#resizeMe2"
});
$("#resizeMe2").resizable();
});
</script>
</head>
<body>
<h2>jQueryUI Example using Options</h2>
<div id="resizeMe1">
Resize the element with other element!!!
</div>
<div id="resizeMe2">
Resized!!!!
</div>
</body>
</html>
- The script uses resizable option called alsoResize, which resize synchronously one or more elements with resizable elements.
- The function uses two ID selectors’ #resizeMe1 and #resizeMe1 within the div element. The alsoResize options resize the other element by using the ID #resizeMe2 and define different CSS styles using these two ID’s as shown in the script.
JQuery Resizable Options Demo2
Resizable Widget Methods
The following table shows some of the methods which are used with resizable widget:
| Method | Description |
|---|---|
| destroy() | It removes the resizable functionality . |
| disable() | This method disables the resizable action. |
| enable() | This method enables the resizable action. |
| instance() | It creates the resizable instance object. If there is no instance, then it returns undefined. |
| options() | It returns the options property. It sets resizable option with specified option name. |
| widget() | It defines resizable element with jQuery object. |
The following example demonstrates usage of disable, enable and destroy methods:
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#resizeMe1,#resizeMe2,#resizeMe3{
width: 200px;
height: 200px;
border: 1px solid black;
text-align: center;
float: left;
margin-left: 10px;
background-color: lightblue;
}
</style>
<script type="text/javascript">
$(function(){
$("#resizeMe1").resizable();
$("#resizeMe1").resizable('disable');
$("#resizeMe2").resizable();
$("#resizeMe2").resizable('enable');
$("#resizeMe3").resizable();
$("#resizeMe3").resizable('destroy');
});
</script>
</head>
<body>
<h2>jQueryUI Example using Methods</h2>
<div id="resizeMe1">
Disabled Element!!!
</div>
<div id="resizeMe2">
Enabled Element!!!!
</div>
<div id="resizeMe3">
Destroyed Element!!!!
</div>
</body>
</html>
- The script uses some of the resizable methods such as disable, enable and destroy.
- The disable method disables the functionality of an element. We can’t do perform any operations on disabled element.
- To make element enable, use the method named as enable where we can able to resize the element.
- The destroy method destroys the resizable functionality completely. It does not allow performing any actions on the element.
Resizable Widget Events
The following table shows events which are used with resizable widget:
| Event | Description |
|---|---|
| create(event, ui) | It fires when resizable element is created. |
| resize(event, ui) | It fires during the resize, when the resize handler is dragged. |
| start(event, ui) | It fires when resize operation starts. |
| stop(event, ui) | It fires when resize operation ends. |
The following example demonstrates usage of start, resize and stop events:
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#resizeMe{
width: 100px;
height: 100px;
border: 1px solid black;
margin-left: 10px;
background-color: lightblue;
}
#resizeMe1{
color:red;
}
</style>
<script type="text/javascript">
$(function (){
$("#resizeMe").resizable({
start: function(event, ui){
$("#resizeMe1").text('Resizing Started');
},
resize: function(event, ui){
},
stop: function(event, ui){
$("#resizeMe1").text('Resizing Stopped');
}
});
});
</script>
</head>
<body>
<h2>jQueryUI Example using Events</h2>
<div id="resizeMe">
Resize Me!!!
</div><br>
<span id="resizeMe1"></span>
</body>
</html>
- The above script makes use of resizable events namely start, resize and stop events.
- The start event triggers when resizable operation starts. When resize operation starts, the text message will get display saying “’Resizing Started’.
- The stop event fires when resizable operation ends. When operation ends, the text message will get display as “Resizing Stopped” as specified in the script above.
- The resize event fires when the handler of resizable element is dragged.
JqueryUI Sortable Example