In this tutorial, we will learn JQuery UI Resizable Example


jquery UI resizable() method is used to resize the selected element. It is easy and simple to resize select elements. This method show icon in the right bottom to the selected element.



Example :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Resizable Example</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>
        #resizable { width: 150px; height: 150px;margin:40px auto; padding: 0.5em; border:2px solid #008B8B;}
        #resizable h3 { text-align: center; margin: 0;padding:5px;letter-spacing:1px; background: #008B8B;color:#fff;border:1px solid #fff; }
    </style>
</head>
<body>
    <h2>jQuery UI Resizable Example - rathorji.in</h2>
    <div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Resizable</h3>
    </div>
    <script>
        $( function() {
            $("#resizable").resizable();
        });
    </script>
</body>
</html>


May this example help you.