jQuery resize div width and height | Lessoncup Programming Blog

Monday, 28 October 2013

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>

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons