JQuery

JQueryUI - Day 4 (Resizable)

Before reading this article, I highly recommend reading my previous parts:

Resizable is used to set size of an element using mouse. Resizable have draggable resizer handlers. We can specify one or more handles as well as min and max width and height.

Code:

  1. <htmlxmlns="http://www.w3.org/1999/xhtml">  
  2.     <headrunat="server">  
  3.         <title></title>  
  4.         <script>  
  5.             $(document).ready(function()  
  6.             {  
  7.                 $("#div1").resizable();  
  8.             })  
  9.         </script>  
  10.         <style>  
  11.             #div1 {  
  12.                 background-color: blueviolet;  
  13.                 height: 100px;  
  14.                 width: 150px;  
  15.                 margin-left: 50px;  
  16.                 margin-top: 30px;  
  17.                 font-size: 24px;  
  18.                 text-align: center;  
  19.                 padding-top: 50px;  
  20.                 margin-left: 450px;  
  21.                 margin-top: 100px;  
  22.             }  
  23.         </style>  
  24.         </head>  
  25.   
  26.         <body>  
  27.             <formid="form1" runat="server">  
  28.                 <div>  
  29.                     <divid="div1"><span>Resize Me!</span></div>  
  30.                 </div>  
  31.             </form>  
  32.         </body>  
  33.   
  34.     </html>  
Output
resize me
Options
Option Description Example
alsoResize It define that One or more elements to resize synchronously with the resizable element. $("#res1").resizable({
alsoResize:"#res2"
});
animate Define animates to the final size after resizing. $("#res1").resizable({
animate: true
});
animateDuration Define the time in which animation will complete. This option is used only when animate option is true. By default its value is "slow". $("#res1").resizable({
animateDuration: "slow"
});
animateEasing Define which easing to apply when using the animate option. By default its value is "swing". $("#res1").resizable({
animate:true,
animateDuration: "slow",
animateEasing: "easeOutBounce"
});
aspectRatio Define that whether to keep the aspect (height and width) ratio for the item. By default its value is false. $("#res1").resizable({
animate:true,
aspectRatio:true
});
autoHide It is used to hide the magnification icon or handles. It will appear when the mouse is over the item. By default its value is false. $("#res1").resizable({
autoHide: true
});
cancel Prevents resizing from starting on specified elements. By default its value is input, textarea, button , select , option $("#res1").resizable({
cancel: "#text"
});
containment Constrains resizing to within the bounds of the specified element or region. $("#res1").resizable({
containment: "parent"
});
delay Define time in milliseconds to start the resizing. It specified that resizing will not start until after mouse is moved beyond duration. $("#res1").resizable({
delay:200
});
disabled Disabled the resizable by define true. $("#res1").resizable({
disabled: true
});
distance It specified that resizing will not start until after mouse is moved beyond distance. $("#res1").resizable({
distance: 30
});
ghost Define a semi-transparent helper element is shown for resizing. $("#res1").resizable({
ghost: true
});
grid Snaps the resizing element to a grid, every x and y pixels using array [x,y] $("#res1").resizable({
grid: [20, 10]
});
handles This option is a character string indicating which sides or angles of the element can be resized. A comma delimited list of any of the following: n, e, s, w, ne, se, sw, nw, all $("#res1").resizable({
handles: {
'ne': '#negrip',
'se': '#segrip',
'sw': '#swgrip',
'nw': '#nwgrip'
}
});
maxHeight The maximum height the resizable should be allowed to resize to. Default value is null. $("#res1").resizable({
maxHeight:420
});
maxWidth The maximum width the resizable should be allowed to resize to. Default value is null. $("#res1").resizable({
maxWidth:420
});
minHeight The minimum width the resizable should be allowed to resize to. Default value is 10. $("#res1").resizable({
minHeight:120
});
minWidth The minimum width the resizable should be allowed to resize to. Default value is 10. $("#res1").resizable({
minWidth:120
});

Methods

Method Name Description Example
destroy Removes the resizable functionality completely. This will return the element back to its pre-init state. $("#res1").resizable("destroy");
disable Disable the resizable element $("#res1").resizable("disable");
enable Enable the resizable element $("#res1").resizable("enable");
instance Return the instance object of resizable element. If element does not have an associated instance then it will return “undefined” $("#res1").resizable("instance");
option Return an object contain key/value pairs representing the current resizable options. varObj_= $("#res1").resizable("option");
option(optionName) Get value of specified option varObj_=$("#res1").resizable("option", "disabled")
option(optionName, Value) Set value of specified option $("#res1").resizable( "option", "disabled", true );
widget Return a jQuery Object varObj_= $("#res1").resizable("widget");

Events

Event Description Example
create(event, ui) Triggered when the resizable is created $("#res1").resizable({
create: function (event, ui) { }
});
resize(event, ui) riggered triggered when the handler of resizable element is dragged. ui object contain element, helper, originalElement, originalPosition, position, size property. T $("#res1").resizable({
resize: function (event, ui) { }
});
start(event,ui) Triggered at the start of a resize operation.ui object contain element, helper, originalElement, originalPosition, position, size property. $("#res1").resizable({
start: function (event, ui) { }
});
stop(event, ui) Triggered at the end of a resize operation. ui object contain element, helper, originalElement, originalPosition, position, size property. $("#res1").resizable({
stop: function (event, ui) { }
});

Now we will take some examples.

Example 1

  1. <headrunat="server">  
  2.     <title></title>  
  3.     <script>  
  4.         $(document).ready(function()  
  5.         {  
  6.             $('#Resizable1').resizable(  
  7.             {  
  8.                 handles:  
  9.                 {  
  10.                     'ne': '#neg',  
  11.                     'se': '#seg',  
  12.                     'sw': '#swg',  
  13.                     'nw': '#nwg'  
  14.                 }  
  15.             });  
  16.         })  
  17.     </script>  
  18.     <style>  
  19.         #Resizable1 {  
  20.             border: 1pxsolid#000000;  
  21.             width: 300px;  
  22.             height: 40px;  
  23.             overflow: hidden;  
  24.             background-color: cornsilk;  
  25.             margin-left: 200px;  
  26.             margin-top: 100px;  
  27.         }  
  28.           
  29.         #nwg,  
  30.         #neg,  
  31.         #swg,  
  32.         #seg {  
  33.             width: 10px;  
  34.             height: 10px;  
  35.             background-color: #ffffff;  
  36.             border: 1pxsolid#000000;  
  37.         }  
  38.           
  39.         #segrip {  
  40.             right: -5px;  
  41.             bottom: -5px;  
  42.         }  
  43.     </style>  
  44.     </head>  
  45.   
  46.     <body>  
  47.         <formid="form1" runat="server">  
  48.             <divid='Resizable1'>  
  49.                 <h1>You Can Resize in any Direction</h1> Title  
  50.                 <divclass="ui-resizable-handle ui-resizable-nw" id="nwg">  
  51.                 </div>  
  52.                 <divclass="ui-resizable-handle ui-resizable-ne" id="neg">  
  53.                 </div>  
  54.                 <divclass="ui-resizable-handle ui-resizable-sw" id="swg">  
  55.                 </div>  
  56.                 <divclass="ui-resizable-handle ui-resizable-se" id="seg">  
  57.                 </div>  
  58.             </div>  
  59.         </form>  
  60.     </body>  
  61.   
  62. </html>  
Output

result

Example 2
  1. <headrunat="server">  
  2.     <title></title>  
  3.     <script>  
  4.         $(document).ready(function()  
  5.         {  
  6.             $('#Resizable1').resizable(  
  7.             {  
  8.                 handles: 's',  
  9.                 ghost: true,  
  10.                 animate: true,  
  11.                 animateDuration: "slow",  
  12.                 stop: function(event, ui)  
  13.                 {  
  14.                     $(this).css("width", '');  
  15.                 }  
  16.             });  
  17.         })  
  18.     </script>  
  19.     <style>  
  20.         #Resizable1 {  
  21.             border: 1pxsolid#000000;  
  22.             width: 300px;  
  23.             height: 240px;  
  24.             overflow: hidden;  
  25.             background-color: darkmagenta;  
  26.             margin-left: 200px;  
  27.             margin-top: 100px;  
  28.         }  
  29.     </style>  
  30.     </head>  
  31.   
  32.     <body>  
  33.         <formid="form1" runat="server">  
  34.             <divid='Resizable1'>  
  35.                 <h1>You Can Resize only in vertical Direction</h1> </div>  
  36.         </form>  
  37.     </body>  
  38.   
  39. </html>  
Output

At the time of dragging:

dragging

Above effect is obtained because we use “ghost” option. Final result a resized div.

run program

Example 3
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">  
  2.     <headrunat="server">  
  3.         <title></title>  
  4.         <script>  
  5.             $(document).ready(function()  
  6.             {  
  7.                 $("#res1").resizable(  
  8.                 {  
  9.                     containment: "#res2",  
  10.                     minHeight: 170,  
  11.                     minWidth: 200  
  12.                 });  
  13.             })  
  14.         </script>  
  15.         <style>  
  16.                 #res2 {  
  17.                 background-color: blueviolet;  
  18.                 height: 300px;  
  19.                 width: 450px;  
  20.                 margin-left: 50px;  
  21.                 margin-top: 30px;  
  22.                 font-size: 24px;  
  23.                 text-align: center;  
  24.                 padding-top: 50px;  
  25.                 margin-left: 450px;  
  26.                 margin-top: 100px;  
  27.             }  
  28.               
  29.             #res1 {  
  30.                 background-color: blueviolet;  
  31.                 height: 100px;  
  32.                 width: 150px;  
  33.                 margin-left: 50px;  
  34.                 margin-top: 30px;  
  35.                 font-size: 24px;  
  36.                 text-align: center;  
  37.                 padding-top: 50px;  
  38.         </style>  
  39.         </head>  
  40.   
  41.         <body>  
  42.             <formid="form1" runat="server">  
  43.                 <div>  
  44.                     <divid="res2" class="square" style="background-color:orange">  
  45.                         <divid="res1" class="square">I can resize within outher Container </div>  
  46.                    </div>  
  47.                 </div>  
  48.              </form>  
  49.         </body>  
  50.   
  51.     </html>  
Output

run

In the above example inner resizable element can only resize with boundary of outer element because we define the assign outer div (res2) as containment of inner div (res1).

Example 4:
  1. <headrunat="server">  
  2.     <title></title>  
  3.     <script>  
  4.         $(document).ready(function()  
  5.         {  
  6.             $("#res1").resizable(  
  7.             {  
  8.                 create: function(event, ui)  
  9.                 {  
  10.                     $("<br/><b>Resizable has been created </b>").appendTo("#div2")  
  11.                 },  
  12.                 resize: function(event, ui)  
  13.                 {  
  14.                     $(" <br/><b>Resizable has been resized</b>").appendTo("#div2")  
  15.                 },  
  16.                 start: function(event, ui)  
  17.                 {  
  18.                     $("<br/><b>Resizable has been started</b>").appendTo("#div2")  
  19.                 },  
  20.                 stop: function(event, ui)  
  21.                 {  
  22.                     $("<br/><b>Resizable has been stoped</b>").appendTo("#div2")  
  23.                 }  
  24.             });  
  25.         })  
  26.     </script>  
  27.     <style>  
  28.             #res1 {  
  29.             background-color: blueviolet;  
  30.             height: 100px;  
  31.             width: 150px;  
  32.             margin-left: 50px;  
  33.             margin-top: 30px;  
  34.             font-size: 24px;  
  35.             text-align: center;  
  36.             padding-top: 50px;  
  37.     </style>  
  38.     </head>  
  39.   
  40.     <body>  
  41.         <formid="form1" runat="server">  
  42.             <div>  
  43.                 <divid="res1" class="square">I can resize within outher Container </div>  
  44.             <divid="div2" style="font-size:20px;color:blue">  
  45.             </div>  
  46.             </div>  
  47.         </form>  
  48.     </body>  
  49.   
  50. </html>  
Output

Output

In above example we created event listener for create, start, stop and resize event. Each event will append some to “div2”.

Thanks for reading the article. 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs