jQuery UI Interaction : Resizable

This page discusses - jQuery UI Interaction : Resizable

Ads

jQuery UI Interaction : Resizable

     

jQuery UI Interaction : Resizable

Using jQuery resizable plug-in , you can make selected item resizable. Means you can resize it. Resizing by holding 'ctrl' key can resize it equally.

For options, events ,method and theming click here

EXAMPLE :

resizable.html

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui
/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery
/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui
/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; }
</style>
<script>
$(document).ready(function() {
$("#resizable").resizable();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="resizable"></div>
</body>
</html>

 Output :

You can resize the below box :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.

Advertisements

Share on Google+Share on Google+

jQuery UI Interaction : Resizable

Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

Ads
 

Discuss: jQuery UI Interaction : Resizable  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0

Ads

 

Ads