JQuery UI Resizeable

The last article explained the process of making an element drag-able and drop-able. You can also change the size of the html element at run time using the JQuery UI resizeable function. To make an element resizezble, you simply have to select the element and call resizeable() function on that element. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Resizeable</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
     $(function() {
        $( "#square" ).resizable();
     });
  </script>

    <style>
         .outer {
            background-color: darkturquoise;
            border: 1px solid #b9cd6d;
            color: #CCC;
            font-weight: bold;
         }
         .inner{
            background-color: aliceblue;
            border: 1px solid #000;
            color: #111;
         }
         #square 
        { width: 200px; 
        height: 200px; 
        padding: 0.5em;
        text-align: center;
        margin: 0; 
        }
        
      </style>
      <!-- Javascript -->
    
   </head>

   <body>
      <!-- HTML --> 
      <div id="square" class="outer"> 
         <h3 class="inner">To resize, pull edges.</h3>
      </div>
  </body>
</html>

Download Code Run Code

The above html code will result in a page which contains a blue box. If you look at the bottom right corner of the box, you should see a small black icon. This shows that this box is resizeable. Now if you click at any edge of the box and pull it, you should see box resizing itself.

Resizeable with Additional Parameters

As said earlier optional parameters can be passed to resizeable() function in order to create additional effects while resizing the element. The following example demonstrates how additional parameters are passed to resizeable() function to create additional affects.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Resizeable with Parameters</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
     $(function() {
        $( "#square" ).resizable({
            animate: true
        });
         
        $( "#square2" ).resizable({
            ghost: true
        });
     });
  </script>

    <style>
         .outer {
            background-color: darkturquoise;
            border: 1px solid #b9cd6d;
            color: #CCC;
            font-weight: bold;
         }
         .inner{
            background-color: aliceblue;
            border: 1px solid #000;
            color: #111;
         }
         #square, #square2 
        { width: 200px; 
        height: 200px; 
        padding: 0.5em;
        text-align: center;
        margin: 0; 
        }
        
      </style>
      <!-- Javascript -->
    
   </head>

   <body>
      <!-- HTML --> 
      <div id="square" class="outer"> 
         <h3 class="inner">To resize, pull edges.</h3>
      </div>
       
       <br/>
       
        <div id="square2" class="outer"> 
         <h3 class="inner">To resize, pull edges.</h3>
      </div>
  </body>
</html>

Download Code Run Code

The above webpage will contain two resizeable divs. These div elements are styled to look like squares. The “animate” parameter is passed to the resizeable() function of the upper square. Similarly, “ghost” is passed as parameter to the second square. Now, if you resize upper square by pulling its edges you shall see that the resizing takes place in the form of animation. Similarly, resizing the second square by pulling its edges creates a shadow like effect. This is called ghost effect. When you release the mouse, the element is resized to the length of the shadow created.

<<< JQuery UI Draggable-DroppableJQuery UI Selectable >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .