jQuery UI resizable

jQuery UI resizable() method is used to resize any DOM element. It simplifies the method of resizing of elements and reduces time and a lot of coding.

The resizable () method displays an icon in the bottom right of the item to resize.

Syntax:

You can use the resizable () method in two forms:

First Method

The resizable (options) method specifies that you can resize an HTML element. Here the ?options? parameter is an object that specifies the behavior of the elements involved when resizing.

Syntax:

You can use one or more options at a time of using JavaScript object. In the case of more than one option, you have to separate them using a comma as follows:

Following is a list of different options that can be used with this method:

Option	Description
alsoResize	This option is of type selector, jQuery , or any DOM element. It represents elements that also resize when resizing the original object. By default its value is FALSE.
animate	If you set this option to TRUE, it enables a visual effect during resizing when the mouse button is released. The default value is FALSE (no effect).
animateDuration	This option specifies the duration of the resizing effect in millisecond. It is used only when animate option is true. By default its value is "slow".
animateEasing	This option specifies which easing should be applied when using the animate option. By default its value is "swing".
aspectRatio	This option indicates the aspect (height and width) ratio for the item. By default its value is false.
autoHide	This option is used to hide the magnification icon or handles, except when the mouse is over the item. By default its value is false.
cancel	This option is used to prevent resizing on specified elements. By default its value is input, textarea, button, select, option.
containment	This option is used restrict the resizing of elements within a specified element or region. By default its value is false.
delay	This option is used to set tolerance or delay in milliseconds. After that, resizing or displacement will begin. By default its value is 0.
disabled	If you set this option to TRUE, it disables the resizing mechanism. The mouse no longer resizes elements, until the mechanism is enabled, using the resizable ("enable"). By default its value is false.
distance	This option specifies that the resizing will start only when the mouse moves a distance(pixels). By default its value is 1 pixel. This can help prevent unintended resizing when clicking on an element.
ghost	If you set this option to TRUE, a semi-transparent helper element is shown for resizing. This ghost item will be deleted when the mouse is released. By default its value is false.
grid	This option is of type array [x, y], indicating the number of pixels that the element expands horizontally and vertically during movement of the mouse. By default its value is false.
handles	This option is a character string that specifies which sides or angles of the element can be resized. By default its values are e, s, se.
helper	This option is used to add a CSS class to style the element which you want to resize. When the element is resized a new <div> element is created, which is the one that is scaled (UI-resizable-helper class). Once the resize is complete, the original element is sized and the <div> element disappears. By default its value is false.
maxHeight	This option is used to set the maximum height the resizable should be allowed to resize to. By default its value is NULL.
maxWidth	This option is used to set the maximum width the resizable should be allowed to resize to. By default its value is NULL.
minHeight	This option is used to set the minimum height the resizable should be allowed to resize to. By default its value is 10.
minWidth	This option is used to set the minimum width the resizable should be allowed to resize to. By default its value is 10.

jQueryUI resizable() Example 1

Let's take a simple example to demonstrate the resizable functionality, passing no parameter to the resizable () method.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:lightyellow;
            border: 1px solid #b9cd6d;
            color: Red;
            font-weight: bold;
         }
         .ui-widget-content {
            background: lightgreen;
            border: 1px solid #DDDDDD;
            color: Red;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id="resizable" class="ui-widget-content"> 
         <h3 class="ui-widget-header">Pull my edges to resize me!!</h3>
      </div>
  </body>
</html>

Test it Now

jQueryUI resizable() example 2

Use of animate and ghost:

The following example shows the usage of two options animate and ghost in the resize function of jQuery UI

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:lightyellow;
            border: 1px solid #b9cd6d;
            color: Red;
            font-weight: bold;
         }
         .ui-widget-content {
            background: lightgreen;
            border: 1px solid #DDDDDD;
            color: Red;
         }
         #resizable-2,#resizable-3 { 
            width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      <!-- JavaScript -->
      <script>
         $(function() {
            $( "#resizable-2" ).resizable({
               animate: true
            });
            $( "#resizable-3" ).resizable({
               ghost: true
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="resizable-2" class="ui-widget-content"> 
         <h3 class="ui-widget-header">
            Pull my edges and Check the animation!!
         </h3>
      </div><br>
      <div id="resizable-3" class="ui-widget-content"> 
         <h3 class="ui-widget-header">I'm ghost!!</h3>
      </div> 
   </body>
</html>

Test it Now

jQuery UI resizable() example 3

Use of delay, distance and autoHide:

The following example shows the usage of three options delay, distance and autoHide in the resize function of jQuery UI.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         .ui-widget-header {
            background:lightgreen;
            border: 1px solid #b9cd6d;
            color: red;
            font-weight: bold;
         }
         .ui-widget-content {
            background: lightgreen;
            border: 1px solid #DDDDDD;
            color: black;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            -right: 20px;
         }
      </style>
      <script>
         $(function() {
            $( "#resizable-5" ).resizable({
               delay: 1000
            });

            $( "#resizable-6" ).resizable({
               distance: 40
            });
            $( "#resizable-7" ).resizable({
               autoHide: true
            });
         });
      </script>
   </head>
   <body>
      <div id="resizable-5" class="square ui-widget-content">
         <h3 class="ui-widget-header">
            Resize starts after delay of 1000ms
         </h3>
      </div><br>
      <div id="resizable-6" class="square ui-widget-content">
         <h3 class="ui-widget-header">
            Resize starts at distance of 40px
         </h3>
      </div><br>
      <div id="resizable-7" class="square ui-widget-content">
         <h3 class="ui-widget-header">
            Hover over me to see the magnification icon!
         </h3>
      </div>
   </body>
</html>

Test it Now

jQuery UI resizable() example 4

Use of alsoResize:

The following example demonstrates the use of option alsoResize in the resize function of jQuery UI.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:yellow;
            border: 1px solid #b9cd6d;
            color: red;
            font-weight: bold;
         }
         .ui-widget-content {
            background: lightgreen;
            border: 1px solid #DDDDDD;
            color: red;
         }
         #resizable-8,#resizable-9{ width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-8" ).resizable({
               alsoResize: "#resizable-9"
            });
            $( "#resizable-9" ).resizable();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="resizable-8" class="ui-widget-content"> 
         <h3 class="ui-widget-header">Resize Me!!</h3>
      </div><br>
      <div id="resizable-9" class="ui-widget-content"> 
         <h3 class="ui-widget-header">I also get resized!!</h3>
      </div> 
   </body>
</html>

Test it Now

Second Method

The resizable ("action", params) method is used to perform an action on resizable elements. For example: allowing or preventing resizing functionality. The action is specified as a string in the first argument (e.g., "disable" to prevent the resize).

Syntax:

Following is a list of actions that can be used with this method:

Action	Description
destroy	This action is used to destroy the resizable functionality of an element completely. This will return the element back to its pre-init state.
disable	This action is used to disable the resizing functionality of an element. This method does not accept any arguments.
enable	This action is used to enable the resizing functionality of an element. This method does not accept any arguments.
option( optionName )	This action retrieves the value of the specified optionName. This option corresponds to one of those used with resizable (options).
option()	This action is used to get an object containing key/value pairs representing the current resizable options hash. This action does not accept any arguments.
option(optionName, value )	This action sets the value of the resizable option with the specified optionName. This option corresponds to one of those used with resizable (options).
option( Options )	This action sets one or more options for the resizable.
widget()	This action returns a jQuery object containing the resizable element. This method does not accept any arguments.

jQueryUI resizable() example 5

Let's take some examples to demonstrate the usage of actions from the above table.

In the following example, we are going to demonstrate the use of destroy () and disable () methods.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:yellow;
            border: 1px solid #b9cd6d;
            color: red;
            font-weight: bold;
         }
         .ui-widget-content {
            background: lightgreen;
            border: 1px solid #DDDDDD;
            color: red;
         }
         #resizable-12,#resizable-13 { width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-12" ).resizable();
            $( "#resizable-12" ).resizable('disable');
            $( "#resizable-13" ).resizable();
            $( "#resizable-13" ).resizable('destroy');	
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id="resizable-12" class="ui-widget-content"> 
         <h3 class="ui-widget-header">I'm disable!!</h3>
      </div><br>
      <div id="resizable-13" class="ui-widget-content"> 
         <h3 class="ui-widget-header">I'm Destroyed!!</h3>
      </div>
   </body>
</html>

Test it Now

Next TopicjQuery UI Selectable

← prev next →