ejResizable

11 Jul 20187 minutes to read

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