Functionalities

Delay Resize

We can set the required distance the mouse should travel in order to initiate resize using distance property.

  • html
  • <div id="Container">
            <!-- Resizable element-->
            <div id="resizeElement" class="Resize">
                <span class="ResizeText">Resize</span>
            </div>
    
        </div>
        <style>
            #Container {
                width: 100px;
                height: 100px;
                padding: 30px;
                float: left;
            }
    
    
            .Resize {
                width: 120px;
                height: 100px;
                float: left;
                font-size: 14px;
                line-height: 37px;
                color: white;
                text-align: center;
                z-index: 100002;
                background-color: #666;
                cursor: nw-resize;
            }
    
    
            .ResizeText {
                font-size: 15px;
                line-height: 80px;
                display: inline-block;
                color: white;
            }
    
            body {
                font-family: -webkit-pictograph;
            }
        </style>
  • javascript
  • jQuery(function ($) {
              $("#resizeElement").ejResizable({
                  helper: function (event) {
                      return $(event.element); // Object of the Resizable element.
                  },
                  distance:20
              });
    
    
    
          });

    Cursor Distance

    We can set the offset for resize helper with respect to the mouse cursor using cursorAt property.

  • html
  • <div id="Container">
            <!-- Resizable element-->
            <div id="resizeElement" class="Resize">
                <span class="ResizeText">Resize</span>
            </div>
    
        </div>
        <style>
            #Container {
                width: 100px;
                height: 100px;
                padding: 30px;
                float: left;
            }
    
    
            .Resize {
                width: 120px;
                height: 100px;
                float: left;
                font-size: 14px;
                line-height: 37px;
                color: white;
                text-align: center;
                z-index: 100002;
                background-color: #666;
                cursor: nw-resize;
            }
    
    
            .ResizeText {
                font-size: 15px;
                line-height: 80px;
                display: inline-block;
                color: white;
            }
    
            body {
                font-family: -webkit-pictograph;
            }
        </style>
  • javascript
  • jQuery(function ($) {
              $("#resizeElement").ejResizable({
                  helper: function (event) {
                      return $(event.element); // Object of the Resizable element.
                  },
                 cursorAt:{ top: 3, left: -2 }
              });
          });

    Restrict Resize Height and Width:

    We have some properties minHeight, minWidth, maxHeight and maxWidth which can be used to restrict the height and width below or above which the element cannot be resized.

  • html
  • <div id="Container">
            <!-- Resizable element-->
            <div id="resizeElement" class="Resize">
                <span class="ResizeText">Resize</span>
            </div>
    
        </div>
        <style>
            #Container {
                width: 100px;
                height: 100px;
                padding: 30px;
                float: left;
            }
    
    
            .Resize {
                width: 120px;
                height: 100px;
                float: left;
                font-size: 14px;
                color: white;
                text-align: center;
                z-index: 100002;
                background-color: #666;
                cursor: nw-resize;
            }
    
    
            .ResizeText {
                font-size: 15px;
                margin-top:30px;
                display: inline-block;
                color: white;
            }
    
            body {
                font-family: -webkit-pictograph;
            }
        </style>
  • javascript
  • jQuery(function ($) {
              $("#resizeElement").ejResizable({
                  helper: function (event) {
                      return $(event.element); // Object of the Resizable element.
                  },
                  minHeight: 80,
                  minWidth: 90,
                  maxHeight: 130,
                  maxWidth: 150,
                 scope:"Container",
                  minHeight: 80,
                  minWidth: 90,
                  maxHeight: 130,
                  maxWidth: 150,
                  resizeStop:function(event)
                  {
                      if ((event.element.height() == 130)||(event.element.width() == 150)||(event.element.height() == 80)||(event.element.width() == 90))
                          $(".ResizeText")[0].innerText = "Resize Restricted.Out of scope!";
                      
                  }
              });
    
          });

    Before Resize:

    When resize done out of these limits: