how to change the size using customer play with resize widget

jquery resizable widget
jQuery Resizable Widget allows you to change the size of an element using the mouse
Consider the following HTML and CSS
<div id="redDiv" class="divClass" style="background-color: red">
Red Div
</div>
<style>
.divClass {
font-family: Arial;
height: 150px;
width: 150px;
text-align: center;
color:white
}
</style>
To make the div element resizable
$(document).ready(function () {
$('#redDiv').resizable();
});
jQuery Resizable Widget Options
alsoResize - Allows to resize one or more elements synchronously with the resizable element	using this if we resize one element, automatically that element also resize alsoResize: '#blueDIV', ANOTHER ELEMENT
animate - Animates to the final size after resizing. Include .ui-resizable-helper class to display outline while resizing	animate:true; in css- .ui.resizable-helper{ border: 2px dotted black;},using css, if we change the widht, it will told the border, and while changing widht , it will animate
aspectRatio - Specifies whether the element should preserve aspect ratio	aspectratio:true; means it will if we set, it will automaticallly change the height also if we change the width only
autoHide - Specifies whether the resize handles should hide when the user is not hovering over the element	autohide:true; means without true, it will show cursor in resize if we hover on tha telement, if so we need at borders only, use autohide:true;
containment - Constrains resizing to within the bounds of the specified element or region	using this we can resize upto some area or upto parent element only, containment:'#div or parentelement'
ghost - specifies whether a semi-transparent helper element should be shown for resizing	ghost:true; we need to resize some border with some transparent layer, using this we can get
maxHeight - The maximum height you can resize to	u can give the max height
minHeight - The minimum height you can resize to	u can give the min heigght to resize
maxWidth - The maximum width you can resize to	u can give the max width to resize
minWidth - The minimum width you can resize to	u can give the min widht to resize
jQuery Resizable Widget Events
start - Triggered at the start of a resize operation
stop - Triggered at the end of a resize operation
resize - Triggered during the resize operation
Resizing redDiv will also resize blueDiv
HTML
<div id="redDiv" class="divClass" style="background-color: red">
Red Div
</div>
<br />
<div id="blueDiv" class="divClass" style="background-color: blue">
Red Div
</div>
jQuery
$(document).ready(function () {
$('#redDiv').resizable({
alsoResize:'#blueDiv'
});
});
Constrains resizing to within the bounds of the container div
HTML
<div id="container" style="border: 3px solid black; height: 300px; width: 300px; padding:5px">
<div id="redDiv" class="divClass" style="background-color: red">
Red Div
</div>
</div>
jQuery
$('#redDiv').resizable({
containment: '#container'
});
$(document).ready(function(){
$(#redDiv').resizable{(
start: function (event, ui){	it will displayes where it will start
$('#startDimensions').html(getDimensions(event, ui);},	whenever this function called, it will execute the dimensions
stop: function (event, ui){	it will displays where it stops
$('#stopDimensions').html(getDimensions(event, ui);},
resize: function (event, ui){	it will displays where it resize
$('#resizingDimensions').html(getDimensions(event, ui);},
} });
function getDimentsions(event, ui){ var html='height=' +ui.size.height+ '<br/>'; html+= 'width=' +ui.size.width;
returnhtml; }
)}; resizable alsoresize animate aspectration autohide containment ghost maxheight minheight maxwidth minwidth start stop resize resizable resizable resizable start html stop resize how to change the size using customer play with resize widget plays with resizable