Functionalities in JQuery Resizable widget

10 Aug 201712 minutes to read

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:

    Resize

    When resize done out of these limits:

    Exceed