Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
In this video we will discuss 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
animate – Animates to the final size after resizing. Include .ui-resizable-helper class to display outline while resizing
aspectRatio – Specifies whether the element should preserve aspect ratio
autoHide – Specifies whether the resize handles should hide when the user is not hovering over the element
containment – Constrains resizing to within the bounds of the specified element or region
ghost – specifies whether a semi-transparent helper element should be shown for resizing
maxHeight – The maximum height you can resize to
minHeight – The minimum height you can resize to
maxWidth – The maximum width you can resize to
minWidth – The minimum width you can resize to
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’
});
