Objectives and outcomes

In this tutorial we are going to learn about resizable jqueryUI interaction by use of which we can resize our html document elements. The example for the same is shown below:

Drag my edges to resize!!


We can resize the above box by stretching its edges to right side and downwards.

HTML code:

<html>
<head>
<title>jQuery UI Resizeable</title>
<link href="jquery-ui.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<div id="resize" class="box">
<h3 class="heading">Drag my edges to resize!!</h3>
</div>
</body>
</html>


CSS stylesheet:

<style>
.heading {
background:#585858;
color: #FFFFFF;
font-weight: bold;
}
.box {
background: grey;
color: #FFF;
}
#resize 
{
 width: 150px;
 height: 150px; 
 padding: 0.5em;
text-align: center; 
margin: 0; 
}
</style>




Javascript:

<script>
$(function() {
$( "#resize" ).resizable();
});
</script>


We have used resizable function without constraints in jqueryUI to resize the div. In the example below we are going to use the constraints with the function.

Pull the edges and observe the animation!


In above example we have used animate constraint with the resizable function by setting its value to true.


Javascript:

<script>
$(function() {
$( "#resize2" ).resizable({
animate: true
});
});
</script>


Pull edges to see the ghost effect!


In the above example we have used the ghost constraint with value true to get the shadow effect.

Javascript:

<script>
$(function(){
$( "#resize3" ).resizable({
ghost: true
});
});
</script>