JQueryUI Resizable Widget

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:

JQuery Keydown, Keypress and Keyup

JQUery Setting Drop Down Value

JQuery prepend() and prependTo()

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>

JQuery Simple Resizable Demo

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.

JQuery Resizable Options Demo

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.

JQuery Resizable Methods Demo

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.

JQuery Resizable Events Demo

Resizable Widget Options

Resizable Widget Methods

Resizable Widget Events

About Krishna Srinivasan