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:

When resize done out of these limits: