jQuery UI Interaction : Resizable

This page discusses - jQuery UI Interaction : Resizable

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



<!DOCTYPE html>
<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
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui
<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; }
$(document).ready(function() {
<body style="font-size:62.5%;">
<div id="resizable"></div>

 Output :

You can resize the below box :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.