Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jQuery Resizable Widget

Suggested Videos
Part 93 - Draggable element on top
Part 94 - jquery droppable widget
Part 95 - Customizing droppable widget



In this video we will discuss jQuery Resizable Widget



jQuery Resizable Widget allows you to change the size of an element.

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
Option Description
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
Event Description
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 re-sizing 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'
});

The following example handles start, stop and resize events of resizable widget

<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <script src="jquery-ui.js"></script>
    <link href="jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#redDiv').resizable({
                start: function (event, ui) {
                    $('#startDimensions').html(getDimensions(event, ui));
                },
                stop: function (event, ui) {
                    $('#stopDimensions').html(getDimensions(event, ui));
                },
                resize: function (event, ui) {
                    $('#resizingDimensions').html(getDimensions(event, ui));
                }
            });

            function getDimensions(event, ui) {
                var html = 'Height = ' + ui.size.height + '<br/>';
                html += 'Width = ' + ui.size.width;
                return html;
            }
        });
    </script>
    <style>
        .divClass {
            font-family: Arial;
            height: 150px;
            width: 150px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body style="font-family: Arial">
    <form id="form1" runat="server">
        <table border="1" style="border-collapse: collapse;">
            <tr>
                <td>Dimensions at Start</td>
                <td>
                    <div id="startDimensions"></div>
                </td>
            </tr>
            <tr>
                <td>Dimensions while Resizing</td>
                <td>
                    <div id="resizingDimensions"></div>
                </td>
            </tr>
            <tr>
                <td>Dimensions at Stop</td>
                <td>
                    <div id="stopDimensions"></div>
                </td>
            </tr>
        </table>
        <br />
        <div id="redDiv" class="divClass" style="background-color: red">
            Red Div
        </div>
    </form>
</body>
</html>

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.