Functionalities

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: