Today we are going to learn about resizing the html elements using jQuery, we can easily manage the width and height of html elements using .resizable() method. we can also define the width and height using .width() and .height() methods. jQuery ui library providing .resizable() method to resize the elements. lets see how we do this.
To define the width/height to selected element
To resize the selected element in DOM cross browser
to resize the elements we should use jQuery UI library and CSS stylesheet along with jQuery library
HTML and CSS
<script> $(document).ready(function(){ $('#div').width(500); // it define div width to 500px $('#div').height(300); // it define div height to 300xp //we can define both methods at once $('#div').width(500).height(300); }); </script>
To resize the selected element in DOM cross browser
to resize the elements we should use jQuery UI library and CSS stylesheet along with jQuery library
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(document).ready(function() { $("#myDiv").resizable(); }); </script>
HTML and CSS
<style> #myDiv{ width:300px; height:300px; padding:5px; color:#333; font-family:Verdana, Geneva, sans-serif; font-size:12px; overflow:hidden; } </style> <div id="myDiv" class="ui-widget-content"> Drag to Resize the Div... </div>
No comments :
Post a comment