Skip to content

All topics  /  jQuery

JQuery UI Resizable Example

jQuery ·

Hi Dev,

In this blog, I will show you resible element in jquery ui. Resible selected element using jquery ui.The resizeable widget of jquery ui helps to drag and resize the selected elements.

jquery ui resizable() method used to resize selected element.It is easy and simply to resize select element.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 - NiceSnippets.com</h2>
    <div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Resizable</h3>
    </div>
    <script>
        $( function() {
            $("#resizable").resizable();
        });
    </script>
</body>
</html>

It will help you....

More on this topic