jQuery Tutorial

HTML Element Resizable using jQuery resizable method

HTML Div Element Resizable using jQuery

In jQuery, resizable method is used to make any selected element as resizable, here selected div element is resizable.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery resizable method</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <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>
    <style>
        #divTitle {
            width: 150px;
            height: 150px;
            padding: 10px;
            background-color: blue;
            color: white;
        }
    </style>

    <script>
        $(function () {
            $("#divTitle").resizable();
        });
    </script>
</head>
<body>
    <div id="divTitle" class="ui-widget-content">
        div element resizable testing!
    </div>
</body>
</html>

Output:

Before Resizable Div Element:

After Resizable Div Element:

HTML Div Element Resizable Limit

Resizable can be limited based on minimum and maximum width and height.

Resizable is not allowed for the selected Div element more than the limit specified based on minWidth, maxWidth, minHeight and maxHeight properties of resizable method.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery resizable method</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <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>
    <style>
        #divTitle {
            width: 150px;
            height: 150px;
            padding: 10px;
            background-color: blue;
            color: white;
        }
    </style>

    <script>
        $(function () {
            $("#divTitle").resizable({
                minWidth:100,
                maxWidth: 500,
                minHeight:100,
                maxHeight: 400,
            });
        });
    </script>
</head>
<body>
    <div id="divTitle" class="ui-widget-content">
        div element resizable testing!
    </div>
</body>
</html>

Output:

Resize Event for resizable method

resize property is used to trigger event handler when resizing the div element width or height using mouse in bottom or right side of the div element.

This jQuery code, alert the message with resized width and height of selected div element.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery resizable method</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <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>
    <style>
        #divTitle {
            width: 150px;
            height: 150px;
            padding: 10px;
            background-color: blue;
            color: white;
        }
    </style>

    <script>
        $(function () {
            $("#divTitle").resizable({
                minWidth:100,
                maxWidth: 500,
                minHeight:100,
                maxHeight: 400,
                resize: function (event, ui) {
                    alert("width: " + ui.size.width + ", height: " + ui.size.height);
                }
            });
        });
    </script>
</head>
<body>
    <div id="divTitle" class="ui-widget-content">
        div element resizable testing!
    </div>
</body>
</html>

Output:

Disable Resizable Element

disabled property is used to disable the resizable functionality for the selected element.

        $(function () {
            $("#divTitle").resizable({
                minWidth:100,
                maxWidth: 500,
                minHeight:100,
                maxHeight: 400,
                disabled: true,
                resize: function (event, ui) {
                    alert("width: " + ui.size.width + ", height: " + ui.size.height);
                }
            });
        });

« Previous Next »

jQuery Programming Examples