Re sizable is used to change the size of the any element in a web page. If you want to set the div size in 200px x 200px. But you want to dynamically increase the size of the div to your custom size on the page on the client side you can use this re sizable function to customize the shape on the webpage. You can also use re sizable function in all elements like input, text area, image, div etc.
This Resizable Function available in the jQuery UI. Yo wants to use the jQuery UI library file in your web page, then only you can use this resize function.
You can download or directly referred the jQuery library file into your web page and then you can use this.
JS Code:
$( function() {
$( "div.resize" ).resizable();
})HTML:
<div class='resize'></div>
The above code represents the div with class name resize. Now you can resize the div by mouse over on the left and bottom side of the div the cursor pointer will change to resize pointer. You can resize the div click and drag at the edge of the div.
You can also customize to resize the div which side only you want.
If I want only resize the div only on the left side. You can configure this on the resize function. jQuery UI has an option called handles. Handels have the value four different values n, e, w, s. This mean north, east, west, south. North represent the top of the div, East represents the right side of the div, West represent the bottom of the div, South represent the left side of the div.
See the below code.
JS Code:
$(function()}
$("div.resize").resizable({
handles: ‘n’
});
});HTML:
<div class='resize'></div>Above code I give the handle value is n. So you can only resize the div top side only. You cannot resize the div on the other side.
This thing you can do for the other three sides. Which side you want to resize, you must give the corresponding value in the handle.
E - Left
W - Right
S - Bottom
N - Top
Example Code for all side individual.
JS Code:
$(function(){
$(".top").resizable({
handles: 'n' /*-- TOP SIDE ONLY--*/
})
$(".bottom").resizable({
handles: 's' /*-- BOTTOM SIDE ONLY--*/
})
$(".right").resizable({
handles: 'w' /*-- RIGHT SIDE ONLY--*/
})
$(".left").resizable({
handles: 'e' /*-- LEFT SIDE ONLY--*/
})
$(".leftbttom").resizable(); /*-- Default --*/
});HTML CODE:
<div class="resizable left"> <h3>Resizable Left Side</h3> </div> <div class="resizable right"> <h3>Resizable Right Side</h3> </div> <div class="resizable bottom"> <h3>Resizable Bottom Side</h3> </div> <div class="resizable top"> <h3>Resizable Top Side</h3> </div> <div class="resizable leftbttom"> <h3>Resizable Left And Bottom</h3> </div>
CSS Code:
.resizable{width:200px;height:200px;padding:0.5em;margin:5em;border:1px solid #949494}
.resizable h3{text-align:center;margin:0;background:#dddddd}Library Files:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
You can call which version you want in i call above version.
See the output of the above code by click the Live Demo.
