Resizable

Drag the edges to change hight and width of the element.
<script>
$(document).ready(function() {
$( "#resize_id" ).resizable();
})
</script>
Resizable DEMO with full code
alsoResize ^
Type : Selector or element
Default : false
Along with main resizable Element, another element will resize.
$( '#my_resizable' ).resizable({
alsoResize: "#resize_id2"
});
DEMO of alsoResize

To read alsoResizable
var my_var = $( "#my_resizable" ).resizable( "option", "resizable" );
To set alsoResizable ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "resizable", sel );
DEMO of alsoResize with get set
animate ^
Type : Boolean
Default : false
After resizing to animate or not to reach final size.
$( '#my_resizable' ).resizable({
animate: true
});
DEMO of animate

To read animate
var my_var = $( "#my_resizable" ).resizable( "option", "animate" );
To set animate ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "animate", sel ); 
DEMO of animate get set

animateDuration ^
Type : Number or String
Default : 'slow'
Duration of animation as string ( 'slow' or 'fast' ) or number ( duration in milliseconds )
$( '#my_resizable' ).resizable({
animateDuration: 'slow'
});
DEMO of animateDuration

To read animateDuration
var my_var = $( "#my_resizable" ).resizable( "option", "animateDuration" );
To set animate ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "animateDuration", sel );
animateEasing ^
Type : String
Default : 'swing', Full list of easing options is here.
animageEasing we can set to different values from this list.
$( '#my_resizable' ).resizable({
animateEasing: 'slow'
});
DEMO of animateEasing

To read animateEasing
var my_var = $( "#my_resizable" ).resizable( "option", "animateEasing" );
To set animate ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "animateEasing", sel );
aspectRatio^
Type : Boolean or Number
Default : false
The aspect ratio to be maintained ( or not ) for the element .
$( '#my_resizable' ).resizable({
animateEasing: 'slow'
});
DEMO of aspectRatio

To read aspectRaion option
var my_var = $( "#my_resizable" ).resizable( "option", "aspectRatio" );
To set aspectRatio option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "aspectRatio", sel );
autoHide^
Type : Boolean
Default : false
The handles for changing size should be visible or not when the mouse is not hovering over the element.
$( '#my_resizable' ).resizable({
autoHide: false
});
DEMO of autoHide option

To read autoHide option
var my_var = $( "#my_resizable" ).resizable( "option", "autoHide" );
To set autoHide option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "autoHide", sel );
cancel^
Type : Selector
Default : 'input,textarea, button, select'
Prevent the element from resizing.
$( '#my_resizable' ).resizable({
cancel: '.cancel' // all classes of cancel 
});
DEMO of cancel option with get and set

To read cancel option
var my_var = $( "#my_resizable" ).resizable( "option", "cancel" );
To set cancel option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "cancel", sel );
classes^
Type : Object
Default : {
"ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se"
}
$( '#my_resizable' ).resizable({
classes: {
    "ui-resizable": "highlight"
  }
});
To read classes option
var my_var = $( "#my_resizable" ).resizable( "option", "classes.ui-resizable" );
To set classes option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "classes.ui-resizable", sel );
DEMO of classes option with get and set
containment^
Type : Selector or element or string
Default : false
$( '#my_resizable' ).resizable({
containment : 'parent'
});
To read containment option
var my_var = $( "#my_resizable" ).resizable( "option", "containment" );
To set containment option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "containment", sel );
DEMO of containment option with get and set
disabled^
Type : Boolean ( True or False)
Default : false
$( '#my_resizable' ).resizable({
disabled : true
});
To read disabled option
var my_var = $( "#my_resizable" ).resizable( "option", "disabled" );
To set disabled option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "disabled", sel );
DEMO of disabled option with getting the value and setting the value
ghost^
Type : Boolean ( True or False)
Default : false
semi transparent helper element is shown while resizing if it is set to true
$( '#my_resizable' ).resizable({
ghost : true
});
To read ghost option
var my_var = $( "#my_resizable" ).resizable( "option", "ghost" );
To set ghost option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "ghost", sel );
DEMO of ghost option with getting the value and setting the value
grid^
Type : Array
Default : false
While resizing, the element will get snapped to the input grid of given pixels.
$( '#my_resizable' ).resizable({
grid : [10,10]
});
To read grid option
var my_var = $( "#my_resizable" ).resizable( "option", "grid" );
To set grid option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "grid", sel );
DEMO of grid option with getting the value and setting the value
handles^
Resizable handles directions

Type : string or object
Default : 'e,s,se'
While resizing, the handles should appear in which sides. It can be north, south, south east ... etc. Check the demo below.
$( '#my_resizable' ).resizable({
handles : "e,ne,w,nw"
});
To read handles option
var my_var = $( "#my_resizable" ).resizable( "option", "handles" );
To set handler option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "handles", sel );
DEMO of handles option with getting the value and setting the value
helper^
Type : String
Default : false
While resizing a different class will be added to a proxy element and displayed. This is shown till the resizing is completed.
$( '#my_resizable' ).resizable({
helper:'my_helper'
});
To read helper option
var my_var = $( "#my_resizable" ).resizable( "option", "helper" );
To set helper option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "helper", sel );
DEMO of helper option with getting the value and setting the value
maxHeight^
Type : number
Default : null
Maximum height upto which resizing is allowed.
$( '#my_resizable' ).resizable({
maxHeight : 200
});
To read maxHeight option
var my_var = $( "#my_resizable" ).resizable( "option", "maxHeight" );
To set maxHeight option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "maxHeight", sel );
DEMO of maxHeight option with getting the value and setting the value
maxWidth^
Type : number
Default : null
Maximum width upto which resizing is allowed.
$( '#my_resizable' ).resizable({
maxWidth : 200
});
To read maxWidth option
var my_var = $( "#my_resizable" ).resizable( "option", "maxWidth" );
To set maxWidth option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "maxWidth", sel );
DEMO of maxWidth option with getting the value and setting the value
minHeight^
Type : number
Default : null
Minimum height upto which resizing is allowed.
$( '#my_resizable' ).resizable({
minHeight : 200
});
To read minHeight option
var my_var = $( "#my_resizable" ).resizable( "option", "minHeight" );
To set minHeight option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "minHeight", sel );
DEMO of minHeight option with getting the value and setting the value
minWidth^
Type : number
Default : null
Manimum width upto which resizing is allowed.
$( '#my_resizable' ).resizable({
minWidth : 200
});
To read minWidth option
var my_var = $( "#my_resizable" ).resizable( "option", "minWidth" );
To set minWidth option ( sel is the variable )
$( "#my_resizable" ).resizable( "option", "minWidth", sel );
DEMO of minWidth option with getting the value and setting the value
methods^
destroy^
Removes the functionality from the resizable element. No input arguments for this method.
$( '#my_resizable' ).resizable('destroy');
DEMO of destroy method
disable^
Disables the resizable element.
$( '#my_resizable' ).resizable('disable');
DEMO of disable enable methods
enable^
Enables the resizable element.
$( '#my_resizable' ).resizable('enable');
DEMO of disable enable methods
instance^
Retrives resizable element.
$( '#my_resizable' ).resizable('instance');


JQuery UI


plus2net.com



Post your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer