Getting Started with JavaScript Resizable

3 May 20216 minutes to read

The external script dependencies of Resizable widget are,

jQuery 1.7.1 and later versions.

And the internal script dependencies of the Resizable are:

File	Description / Usage
ej.core.min.js	Must be referred always before using all the JS controls.
ej.draggable.min.js	Main file for Resize

For getting started you can use the ‘ej.web.all.min.js’ file, which encapsulates all the ‘ej’ controls and frameworks in one single file.

For themes, you can use the ‘ej.web.all.min.css’ CDN link from the snippet given. To add the themes in your application, please refer this link.

Configure the sample

Create a new HTML file and add CDN links to the JavaScript and CSS dependencies to your project.

HTML

<!DOCTYPE html>

    <html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />

        <!-- style sheet for default theme(flat azure) -->

        <link href="http://cdn.syncfusion.com/28.1.33/js/web/flat-azure/ej.web.all.min.css"
              rel="stylesheet" />

        <!--scripts-->

        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js"></script>

        <script src="http://cdn.syncfusion.com/28.1.33/js/web/ej.web.all.min.js"></script>

    </head>

    <body>

        <!--Place div element to perform Resize-->

        <script>

            // Place your script code here to initialize Resizable

        </script>

    </body>

    </html>

NOTE

In production, we highly recommend you to use our custom script generator to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use GZip compression in your server.

Initialize Resize

HTML elements can be resized by using ejResizable widget. This section explains how to perform resize.

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;
        }


        .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.
              },
            resize: function(event)
              {
                  $(".ResizeText")[0].innerText ="Resizing";
                   $(".Resize").css("cursor","nw-resize");
              }

          });

      });

Output of the above code will be as shown below:

Before Resize:

Getting_Started_Image1

During Resize:

Getting_Started_Image2

Helper

We can resize an element by using helper which will return the object of corresponding resizable element. .

JAVASCRIPT

jQuery(function ($) {
          $("#resizeElement").ejResizable({
              helper: function (event) {
                  return $(event.element); // Object of the Resizable element.
              }

          });

      });