• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JQueryUI Resizable Widget

November 8, 2014 //  by Krishna Srinivasan//  Leave a Comment

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

JQueryUI Simple Example

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

JQueryUI Resizable Options Example

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

JQueryUI Resizable Options Example1

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

JQueryUI Resizable Options Example2

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

JQueryUI Resizable Methods Example

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

JQueryUI Resizable Events Example

Category: jQueryTag: jQuery UI

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « JqueryUI Sortable Example
Next Post: JQueryUI Droppable Widget Example »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact