jQuery UI Interaction : Resizable

Using jQuery resizable plug-in , you can make selected item resizable. Means you can resize it. Resizing by holding 'ctrl' key can resize it equally.

For options, events ,method and theming click here

EXAMPLE :

resizable.html

<!DOCTYPE html>

            <html>

            <head>

            <link href="http://ajax.googleapis.com/ajax/libs/jqueryui

            /1.8/themes/base/jquery-ui.css" 
            rel="stylesheet" type="text/css"/>

            <script src="http://ajax.googleapis.com/ajax/libs/jquery

            /1.4/jquery.min.js"></script>

            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui

            /1.8/jquery-ui.min.js"></script>

            <style type="text/css">

            #resizable { width: 100px; height: 100px; background: silver; }

            </style>

            <script>

            $(document).ready(function() {

            $("#resizable").resizable();

            });

            </script>

            </head>

            <body style="font-size:62.5%;">

            <div id="resizable"></div>

            </body>

            </html>

Output :

You can resize the below box :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.

Related Tags for jQuery UI Interaction : Resizable:

«Previous Index Next»