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.N | Property | Value | example |
|---|---|---|---|
| 1. | maxWidth | 500 | View |
| 2. | maxHeight | 500 | View |
| 3. | minWidth | 100 | View |
| 4. | minHeight | 100 | View |
| 5. | containment | parent, element_name | View |
| 6. | animate | true, false | View |
| 7. | helper | ui-resizable-helper | View |
| 8. | acceptRatio | true | View |
| 9. | grid | 20 | View |
| 10. | ghost | true | View |
| 11. | alsoResize | element_name | View |
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>
Publish A Comment