jQuery - Interaction Resize-able
Advertisements
Description
The Resize able function can be used with interactions in JqueryUI. This function can be enabled Resize able functionality on any DOM element.With the cursor grab the right or bottom border and drag to the desired width or height.
Syntax
Here is the simple syntax to use drag-able −
$( "#resizable" ).resizable();
Example
Following is a simple example showing the usage of Resize-able −
Live Demo<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"> </script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script> <!-- CSS --> <style> .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #resizable-14{ width: 150px; height: 150px; padding: 0.5em;text-align: center; margin: 0; } </style> <!-- Javascript --> <script> $(function() { $( "#resizable-14" ).resizable({ create: function( event, ui ) { $("#resizable-15").text ("I'm Created!!"); }, resize: function (event, ui) { $("#resizable-16").text ("top = " + ui.position.top + ", left = " + ui.position.left + ", width = " + ui.size.width + ", height = " + ui.size.height); } }); }); </script> </head> <body> <!-- HTML --> <div id = "resizable-14" class = "ui-widget-content"> <h3 class = "ui-widget-header">Resize !!</h3> </div><br> <span id = "resizable-15"></span><br> <span id = "resizable-16"></span> </body> </html>
This will produce following result −
jquery-interactions.htm
Advertisements