jQuery Tutorial
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:
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 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:
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 Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page