ejResizable

Plugin to make any DOM element Resizable.

Syntax

  • javascript
  • $(element).ejResizable()

    Example

  • html
  • <div  id="resizing" />
  • javascript
  • <script>
    // Create resizing
    $('#resizing').ejResizable();   
    </script>

    Requires

    • module:jQuery

    • module:ej.core

    Members

    cursorAt object

    Sets the offset of the resizing helper relative to the mouse cursor.

    Default Value

    • { top: -1, left: -2 }

    Example

  • javascript
  • //To set cursorAt API value during initialization  
            $("#resizing").ejResizable({ cursorAt:  { top: 1, left: -2 } });
  • javascript
  • //Get or set the cursorAt API, after initialization:
            //Gets the cursorAt value  
            $("#resizing").ejResizable('option', 'cursorAt');

    distance number

    Distance in pixels after mousedown the mouse must move before resizing should start. This option can be used to prevent unwanted drags when clicking on an element.

    Default Value

    • 1

    Example

  • javascript
  • //To set distance API value during initialization  
            $("#resizing").ejResizable({ distance: 1 });
  • javascript
  • //Get or set the distance API, after initialization:
            //Gets the distance value  
            $("#resizing").ejResizable('option', 'distance');

    handle string

    If specified, restricts resize start click to the specified element(s).

    Default Value

    • null

    Example

  • javascript
  • //To set handle API value during initialization  
            $("#resizing").ejResizable({ handle: null });
  • javascript
  • //Get or set the handle API, after initialization:
            //Gets the handle value  
            $("#resizing").ejResizable('option', 'handle');

    maxHeight number

    Sets the max height till which an element has to be resized.

    Default Value

    • null

    Example

  • javascript
  • //To set maxHeight API value during initialization  
            $("#resizing").ejResizable({ maxHeight: null });
  • javascript
  • //Get or set the maxHeight API, after initialization:
            //Gets the maxHeight value  
            $("#resizing").ejResizable('option', 'maxHeight');

    maxWidth number

    Sets the max width till which an element has to be resized.

    Default Value

    • null

    Example

  • javascript
  • //To set maxWidth API value during initialization  
            $("#resizing").ejResizable({ maxWidth: null });
  • javascript
  • //Get or set the maxWidth API, after initialization:
            //Gets the maxWidth value  
            $("#resizing").ejResizable('option', 'maxWidth');

    minHeight number

    Sets the min Height below which an element cannot be resized.

    Default Value

    • 10

    Example

  • javascript
  • //To set minHeight API value during initialization  
            $("#resizing").ejResizable({ minHeight: null });
  • javascript
  • //Get or set the minHeight API, after initialization:
            //Gets the minHeight value  
            $("#resizing").ejResizable('option', 'minHeight');

    minWidth number

    Sets the min Width below which an element cannot be resized.

    Default Value

    • 10

    Example

  • javascript
  • //To set minWidth API value during initialization  
            $("#resizing").ejResizable({ minWidth: null });
  • javascript
  • //Get or set the minWidth API, after initialization:
            //Gets the minWidth value  
            $("#resizing").ejResizable('option', 'minWidth');

    scope string

    Used to group sets of resizable items.

    Default Value

    • ‘default’

    Example

  • javascript
  • //To set scope API value during initialization  
            $("#resizing").ejResizable({ scope: 'default' });
  • javascript
  • //Get or set the scope API, after initialization:
            //Gets the scope value  
            $("#resizing").ejResizable('option', 'scope');

    Methods

    destroy()

    destroy in the Resizable.

    Example

  • html
  • < div  id="resizing" > </div >
  • javascript
  • <script>
    // Create resizingObj
    var resizingObj  = $("#resizing").data("ejResizable");
    resizingObj.destroy(); 
    </script>

    Events

    destroy

    This event is triggered when the widget destroys.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the autocomplete model
    type string returns the name of the event

    Example

  • javascript
  • //destroy event for Resizable
    $("#resizing").ejResizable({ 
            destroy: function(args) {}
    });

    helper

    This event is triggered when resized.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the autocomplete model
    type string returns the name of the event

    Example

  • javascript
  • //helper event for Resizable
    $("#resizing").ejResizable({ 
            helper: function () {
                   return $('<pre>').html("resizable").appendTo(document.body);}
    });

    resize

  • html
  • This event is triggered when the resizing in progress.
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the autocomplete model
    type string returns the name of the event

    Example

  • javascript
  • //resizeStart event for Resizable
    $("#resizing").ejResizable({ 
            resize: function(args) {}
    });

    resizeStart

    This event is triggered when the resizing is start.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the autocomplete model
    type string returns the name of the event

    Example

  • javascript
  • //resizeStart event for Resizable
    $("#resizing").ejResizable({ 
            resizeStart: function(args) {}
    });

    resizeStop

    This event is triggered when the resizing is stop.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the autocomplete model
    type string returns the name of the event

    Example

  • javascript
  • //resizeStop event for Resizable
    $("#resizing").ejResizable({ 
            resizeStop: function(args) {}
    });