jQuery UI’s resizable() method

Date Published: 02/05/2020Published By: JaiSchool

The resizable() method/widget makes an element resizable. We can change width and height by clicking and dragging an element from its edges.

Example-

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  	}

	  </style>
</head>
<body>

	<div class="box"></div>
	

<script>
	$(document).ready(function(){
		$(".box").resizable();
	});

</script>
</body>
</html>

Options of the Jquery UI's resizable() Method-

S.NPropertyValueexample
1.maxWidth500View
2.maxHeight500View
3.minWidth100View
4.minHeight100View
5.containmentparent, element_nameView
6.animatetrue, falseView
7.helperui-resizable-helperView
8.acceptRatiotrueView
9.grid20View
10.ghosttrueView
11.alsoResizeelement_nameView

maxWidth Option of Jquery UI's resizable()

The element will be no longer resizable after width, defined in the maxWidth property.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  	}

	  </style>
</head>
<body>

	<div class="box"></div>
	

<script>
	$(document).ready(function(){
		$(".box").resizable({
			maxWidth:500,
		});
	});

</script>
</body>
</html>

maxHeight Option

The element will be no longer resizable after height, defined in the maxHeight property.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  	}

	  </style>
</head>
<body>

	<div class="box"></div>
	

<script>
	$(document).ready(function(){
		$(".box").resizable({
			maxWidth:500,
			maxHeight:400,
		});
	});

</script>
</body>
</html>

minWidth Option

Defines the minimum width of an element. The element can not be resized less than this.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  	}

	  </style>
</head>
<body>

	<div class="box"></div>
	

<script>
	$(document).ready(function(){
		$(".box").resizable({
			maxWidth:500,
			maxHeight:400,
			minWidth:80,
		});
	});

</script>
</body>
</html>

minHeight Option

Defines the minimum height of an element. The element can not be resized in height less than defined in the minHeight.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  	}

	  </style>
</head>
<body>

	<div class="box"></div>
	

<script>
	$(document).ready(function(){
		$(".box").resizable({
			maxWidth:500,
			maxHeight:400,
			minWidth:80,
			minHeight:90,
		});
	});

</script>
</body>
</html>

containment Option/property

The resizable element will be in a parent element and can be resized till the width & height of parent element.

containment:"parent", or containment:".element_name"

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.con{
	  		width:400px;
	  		height:400px;
	  		border:1px solid black;
	  		padding:10px;
	  	}
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  	}
	  	.ui-resizable-helper{
	  		border:1px solid green;
	  	}

	  </style>
</head>
<body>
<div class="con">
	<div class="box"></div>
</div>

<script>
	$(document).ready(function(){
		$(".box").resizable({
			animate:true,
			containment:"parent",
		});
	});

</script>
</body>
</html>

animate Option

When you use this animation option, you will see width and height changing because of transition.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  	}

	  </style>
</head>
<body>

	<div class="box"></div>
	

<script>
	$(document).ready(function(){
		$(".box").resizable({
			animate:true,
		});
	});

</script>
</body>
</html>

helper Option

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  	}

	  </style>
</head>
<body>

	<div class="box"></div>
	

<script>
	$(document).ready(function(){
		$(".box").resizable({
			animate:true,
			helper: "resizable-helper",
		});
	});

</script>
</body>
</html>

if this does not work use class value: ui-resizable-helper Select it in CSS

You will see live border or background color (effect of properties whichever you used in CSS ) in the element that is resizing.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  	}
	  	.ui-resizable-helper{
	  		border:1px solid green;
	  	}

	  </style>
</head>
<body>

	<div class="box"></div>
	

<script>
	$(document).ready(function(){
		$(".box").resizable({
			animate:true,
		});
	});

</script>
</body>
</html>

aspectRatio Option

Width and height increases in an aspect ratio. For example - 16/9, 4/3, 4/4, etc.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  	}
	  	.ui-resizable-helper{border:1px solid black;}

	  </style>
</head>
<body>
	<div class="box"></div>

<script>
	$(document).ready(function(){
		$(".box").resizable({
			animate:true,
			aspectRatio:16/9,
		});
	});

</script>
</body>
</html>

grid Option

Defines minimum resize width or height.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  	}
	  	.ui-resizable-helper{border:1px solid black;}

	  </style>
</head>
<body>
	<div class="box"></div>

<script>
	$(document).ready(function(){
		$(".box").resizable({
			animate:true,
			grid:70,
		});
	});

</script>
</body>
</html>

ghost Option

Add shadow effect while resizing.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  		background-color:black;
	  	}
	  	.ui-resizable-helper{border:1px solid black;}

	  </style>
</head>
<body>
	<div class="box"></div>

<script>
	$(document).ready(function(){
		$(".box").resizable({
			ghost:true,
		});
	});

</script>
</body>
</html>

alsoResize Option

The another element will also be resizing when the element is resizing in which resizable() is applied.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  		background-color:black;
	  	}
	  	.another-box{
	  		width:100px;
	  		height:100px;
	  		border:1px solid deeppink;
	  		margin-top:20px;
	  	}
	  	.ui-resizable-helper{border:1px solid black;}

	  </style>
</head>
<body>
	<div class="box"></div>
	<div class="another-box"></div>

<script>
	$(document).ready(function(){
		$(".box").resizable({
			alsoResize:".another-box",
		});
	});

</script>
</body>
</html>

Events of resizable()

start:function(event,ui)
{ //These statements will execute when element will be resized. }

resize: function(event,ui)
{ //These statements will execute when element will be resizing. }

stop: function(event,ui)
{ //These statements will execute when element will be stopped resizing. }

start Event Example

The start event executes only when the resizing started.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  		background-color:black;
	  	}
	  	
	  	.ui-resizable-helper{border:1px solid black;}

	  </style>
</head>
<body>
	<div class="box"></div>
<p class="result"></p>
<script>
	$(document).ready(function(){
		$(".box").resizable({
			start:function(event,ui)
			{
				$(".result").html("Width and Height At The Time When Resizing Started - "+ui.size.width+" and "+ui.size.height);
			}
		});
	});

</script>
</body>
</html>

resize Event Example

The resize event keep executing on, the element is resizing.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  		background-color:black;
	  	}
	  	
	  	.ui-resizable-helper{border:1px solid black;}

	  </style>
</head>
<body>
	<div class="box"></div>
<p class="result"></p>
<script>
	$(document).ready(function(){
		$(".box").resizable({
			resize:function(event,ui)
			{
				$(".result").html("Live width and Height - "+ui.size.width+" and "+ui.size.height);
			}
		});
	});

</script>
</body>
</html>

stop Event Example

Executes when the resizing ended.

<!DOCTYPE html>
<html>
<head>
	<title>Resizable Method</title>
	<meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	  <style>
	  	.box{
	  		width:200px;
	  		height:200px;
	  		border:1px solid red;
	  		background-color:black;
	  	}
	  	
	  	.ui-resizable-helper{border:1px solid black;}

	  </style>
</head>
<body>
	<div class="box"></div>
<p class="result"></p>
<script>
	$(document).ready(function(){
		$(".box").resizable({
			stop:function(event,ui)
			{
				$(".result").html("Width and Height After Resizing - "+ui.size.width+" and "+ui.size.height);
			}
		});
	});

</script>
</body>
</html>