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..... });
Following table lists
the different options that can be used with this method:
Option |
Description |
alsoResize |
This option is of
type Selector, jQuery , or any DOMElement.
It represents elements that also resize when resizing the original object. By
default its value isfalse. |
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). |
animateDuration |
This option is used
to set the duration (in milliseconds) of the resizing effect. This option is
used only whenanimate option is true. By default its
value is "slow". |
animateEasing |
This option is used
to specify which easing to apply when using the animate option.
By default its value is"swing". |
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. |
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. |
cancel |
This option is used
to prevent resizing on specified elements. By default its value isinput,textarea,button,select,option. |
containment |
This option is used
restrict the resizing of elements within a specified element or region. By
default its value is false. |
delay |
This option is used
to set tolerance or delay in milliseconds. Resizing or displacement will
begin thereafter. By default its value is 0. |
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. |
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. |
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. |
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. |
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. |
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. |
maxHeight |
This option is used
to set the maximum height the resizable should be allowed to resize to. By
default its value is null. |
maxWidth |
This option is used
to set the maximum width the resizable should be allowed to resize to. By
default its value is null. |
minHeight |
This option is used
to set the minimum height the resizable should be allowed to resize to. By
default its value is 10. |
minWidth |
This option is used
to set the minimum width the resizable should be allowed to resize to. By
default its value is 10. |
Following section
will show you few 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="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>
<!-- 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's save above code
in an HTML file resizeexample.htm and open it in a standard
browser which supports javascript, you must see the following outout. Now you
can play with the result:
Pull my edges to resize me!!
Drag the square
border to resize.
Use
of animate and ghost
The following example
demonstrates the usage of two options animate andghost in
the resize function of JqueryUI.
<!doctype html>
<html lang="en">
<head>
<meta
charset="utf-8">
<title>jQuery UI
Resizable functionality</title>
<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>
<!-- 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's save above code
in an HTML file resizeexample.htm and open it in a standard
browser which supports javascript, you must see the following outout. Now you
can play with the result:
Pull my edges and Check the animation!!
I'm ghost!!
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="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>
.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's save above code
in an HTML file resizeexample.htm and open it in a standard
browser which supports javascript, you must see the following outout. Now you
can play with the result:
Resize contained to this container
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="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>
.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's save above code
in an HTML file resizeexample.htm and open it in a standard
browser which supports javascript, you must see the following outout. Now you
can play with the result:
Resize starts after delay of 1000ms
Resize starts at distance of 40px
Hover over me to see the magnification icon!
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="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>
<!-- 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's save above code
in an HTML file resizeexample.htm and open it in a standard
browser which supports javascript, you must see the following outout. Now you
can play with the result:
Resize!!
I also get resized!!
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 gridin
the resize function of JqueryUI.
<!doctype html>
<html lang="en">
<head>
<meta
charset="utf-8">
<title>jQuery UI
Resizable functionality</title>
<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>
.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's save above code
in an HTML file resizeexample.htm and open it in a standard
browser which supports javascript, you must see the following outout. Now you
can play with the result:
Resize with aspectRatio of 10/3
Snap me to the grid of [50,20]
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);;
Following table lists
the different actions that can be used with this method:
Action |
Description |
destroy |
This action
destroys the resizable functionality of an element completely. This will
return the element back to its pre-init state. |
disable |
This action
disables the resizing functionality of an element. This method does not
accept any arguments. |
enable |
This action enables
the resizing functionality of an element. This method does not accept any
arguments. |
option( optionName ) |
This action
retrieves the value of the specifiedoptionName. This option
corresponds to one of those used with resizable (options). |
option() |
Gets an object
containing key/value pairs representing the current resizable options hash.
This does not accept any arguments. |
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). |
option( options ) |
This action sets
one or more options for the resizable. |
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="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>
<!-- 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's save above code
in an HTML file resizeexample.htm and open it in a standard
browser which supports javascript, you must see the following outout:
I'm disable!!
I'm Destroyed!!
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 we saw in the previous sections, JqueryUI provides
event methods which gets triggered for a particular event. These event methods
are listed below:
Event Method |
Description |
create(event, ui) |
This event is triggered
when the resizable element is created. |
resize(event, ui) |
This event is
triggered when the handler of resizable element is dragged. |
start(event, ui) |
This event is
triggered at the start of a resize operation. |
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="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>
<!-- 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's save above code
in an HTML file resizeexample.htm and open it in a standard
browser which supports javascript, you must see the following outout:
Resize !!
I'm Created!!
Drag the square box
and you will see the outout getting displayed on resize event.