Resizable

JQuery UI
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

Subscribe

* indicates required
Subscribe to plus2net

    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


    JQuery Video Tutorials




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