jQuery resize div width and height

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

<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>