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
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.
Option - alsoResize
This option can be 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.
This can be of type −
Selector − This type indicates DOM elements to be selected from a DOM document for resizing. jQuery − A callback function will be called for each resizable element on page. This function should return true if the element is resized. Element − An element in the Document Object Model (DOM).
Syntax
$( ".selector" ).resizable({ alsoResize: "#identifier" });
|
| 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).
Option - 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).
Syntax
$( ".selector" ).resizable({ animate: true });
|
| 3 |
animateDuration
This option is used to set the duration (in milliseconds) of the resizing effect. This option is used only when animate
option is true. By default its value is "slow".
Option - animateDuration
This option is used to set the duration (in milliseconds) of the resizing effect. This option is used only when animate option is true. By default its value is "slow".
This can be of type −
Number − This specifies duration in milliseconds String − This sepcifies named duration, such as "slow" or "fast".
Syntax
$( ".selector" ).resizable({ animateDuration: "fast" });
|
| 4 |
animateEasing
This option is used to specify which easing to apply when using the animate option. By default its value is "swing".
Option - animateEasing
This option is used to specify which easing to apply when using the animate option. By default its value is "swing".
Easing functions specify the speed at which an animation progresses at different points within the animation.
Syntax
$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
|
| 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.
Option - 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.
This can be of type −
Boolean − This value if set to true, the element will maintain its original aspect ratio. Number − This specifies the element to maintain a specific aspect ratio during resizing.
Syntax
$( ".selector" ).resizable({ aspectRatio: true });
|
| 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.
Option - 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.
Syntax
$( ".selector" ).resizable({ autoHide: true });
|
| 7 |
cancel
This option is used to prevent resizing on specified elements. By default its value is input,textarea,button,select,option.
Option - cancel
This option is used to prevent resizing on specified elements. By default its value is input,textarea,button,select,option.
Syntax
$( ".selector" ).resizable({ cancel: ".cancel" });
|
| 8 |
containment
This option is used restrict the resizing of elements within a specified element or region. By default its value is false.
Option - containment
This option is used restrict the resizing of elements within a specified element or region. By default its value is false.
This can be of type −
Selector − This type indicates that resizable element will be contained to only the first item in the list found by the selector. Element − This type indicates any DOM element. The resizable element will be contained to the bounding box of this element. String − Possible values for this type are - parent and document.
Syntax
$( ".selector" ).resizable({ containment: "parent" });
|
| 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.
Option - delay
This option is used to set tolerance or delay in milliseconds. Resizing or displacement will begin thereafter. By default its value is
0.
Syntax
$( ".selector" ).resizable({ delay: 150 });
|
| 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.
Option - 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.
Syntax
$( ".selector" ).resizable({ disabled: true });
|
| 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.
Option - 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.
Syntax
$( ".selector" ).resizable({ distance: 30 });
|
| 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.
Option - 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.
Syntax
$( ".selector" ).resizable({ ghost: true });
|
| 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.
Option - 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.
Syntax
$( ".selector" ).resizable({ grid: [ 20, 10 ] });
|
| 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.
Option - handles
This option is a character string indicating which sides or angles of the element can be resized. The possible values are: n,
e, s, and w for the four sides, and ne, se, nw, and sw for the four corners. The letters n, e, s, and w
represent the four cardinal points (North, South, East, and West).
By default its values are e, s, se.
Syntax
$( ".selector" ).resizable({ handles: "n, e, s, w" });
|
| 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.
Option - 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.
Syntax
$( ".selector" ).resizable({ helper: "resizable-helper" });
|
| 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.
Option - maxHeight
This option is used to set the maximum height the resizable should be allowed to resize to. By default its value is null.
Syntax
$( ".selector" ).resizable({ maxHeight: 300 });
|
| 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.
Option - maxWidth
This option is used to set the maximum width the resizable should be allowed to resize to. By default its value is null.
Syntax
$( ".selector" ).resizable({ maxWidth: 300 });
|
| 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.
Option - minHeight
This option is used to set the minimum height the resizable should be allowed to resize to. By default its value is 10.
Syntax
$( ".selector" ).resizable({ minHeight: 150 });
|
| 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.
Option - minWidth
This option is used to set the minimum width the resizable should be allowed to resize to. By default its value is 10.
This can be of type −
Syntax
$( ".selector" ).resizable({ minWidth: 150 });
|
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.
Action - destroy
This action destroys the resizable fubctionality of an element completely. This will return the element back to its pre-init state.
This method does not accept any arguments.
Syntax
$( ".selector" ).resizable("destroy");
|
| 2 |
disable
This action disables the resizing functionality of an element. This method does not accept any arguments.
Action - disable
This action disables the resizing functionality of an element. This method does not accept any arguments.
Syntax
$( ".selector" ).resizable("disable");
|
| 3 |
enable
This action enables the resizing functionality of an element. This method does not accept any arguments.
Action - enable
This action enables the resizing functionality of an element. This method does not accept any arguments.
Syntax
$( ".selector" ).resizable("enable");
|
| 4 |
option( optionName )
This action retrieves the value of the specified optionName. This option corresponds to one of those used with resizable (options).
Action - option( optionName )
This action retrieves the value of the specified optionName. This option corresponds to one of those used with resizable (options).
Syntax
var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
|
| 5 |
option()
Gets an object containing key/value pairs representing the current resizable options hash. This does not accept any arguments.
Action - option()
Gets an object containing key/value pairs representing the current resizable options hash. This does not accept any arguments.
Syntax
var options = $( ".selector" ).resizable( "option" );
|
| 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).
Action - 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).
Syntax
$( ".selector" ).resizable( "option", "disabled", true );
|
| 7 |
option( options )
This action sets one or more options for the resizable.
Action - option( options )
This action sets one or more options for the resizable.
Syntax
$( ".selector" ).resizable( "option", { disabled: true } );
|
| 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.
Event - create(event, ui)
This event is triggered when the resizable element is created. Where event is of type Event, and ui is of type
Object.
Syntax
$( ".selector" ).resizable({
create: function( event, ui ) {}
});
|
| 2 |
resize(event, ui)
This event is triggered when the handler of resizable element is dragged.
Event - resize(event, ui)
This event is triggered when the handler of resizable element is dragged. Where event is of type Event, and ui
is of type Object. Possible values of ui are −
element − A jQuery object representing the resizable element. helper − A jQuery object representing the helper that is being resized. originalElement − The jQuery object representing the original element before it is wrapped. originalPosition − The position represented as {left, top } before the resizable is resized. originalSize − The size represented as { width, height } before the resizable is resized. position − The current position represented as {left, top }. size − The current size represented as { width, height }.
Syntax
$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
|
| 3 |
start(event, ui)
This event is triggered at the start of a resize operation.
Event - start(event, ui)
This event is triggered at the start of a resize operation. Where event is of type Event, and ui is of type
Object. Possible values of ui are −
element − A jQuery object representing the resizable element. helper − A jQuery object representing the helper that is being resized. originalElement − The jQuery object representing the original element before it is wrapped. originalPosition − The position represented as {left, top } before the resizable is resized. originalSize − The size represented as { width, height } before the resizable is resized. position − The current position represented as {left, top }. size − The current size represented as { width, height }.
Syntax
$( ".selector" ).resizable({
start: function( event, ui ) {}
});
|
| 4 |
stop(event, ui)
This event is triggered at the end of a resize operation.
Event - stop(event, ui)
This event is triggered at the end of a resize operation. Where event is of type Event, and ui is of type
Object. Possible values of ui are −
element − A jQuery object representing the resizable element. helper − A jQuery object representing the helper that is being resized. originalElement − The jQuery object representing the original element before it is wrapped. originalPosition − The position represented as {left, top } before the resizable is resized. originalSize − The size represented as { width, height } before the resizable is resized. position − The current position represented as {left, top }. size − The current size represented as { width,height }.
Syntax
$( ".selector" ).resizable({
stop: function( event, ui ) {}
});
|
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.
