Resizable elements in any direction and resizeMe
Resize me
- left
- top
- offset
- duration
-
HorizontalVertical
- resizeMe
$("#resizeMe").resizable();
set resizeMe draggable
resizable full syntax
For the complex layouts that was necessary to have elements resizable in any directions (top, right, bottom and left). So here we are. For easy use, the syntax is nearly the same as the UI Resizable
$("selector").resizable({
- side : { Default value : true to each one
-
- top : true | false,
- left: true | false,
- bottom : true | false,
- right : true | false
- },
- disabled : true | false, //call to disable or enable
- aspectRatio : true | false | number, //that is width / height (ex 1.5)
- distance :: number, //sensible band-width in pixels
- grid : false | [xValue, yValue], //false or grid magnet [x, y]
- maxHeight: number, //default value:null
- maxWidth: number, //default value:null
- minHeight: number, //default value:10
- minWidth: number, //default value:10
});
Note :
- resizable is fully compatible with jQuery UI draggable
- not to have any compatibility issue, this is desactivated if previously detect ui resizable, to force activate the magic resizable, declare before including magic.js :
var overrideResizable = true;
$("#resizeMe").resizeMe(10);
resizeMe full syntax
resizeMe enable you to resize in all direction an element (ex on mouseover), default values shown
$("selector").resizeMe({
- left : 0.5, //any float : 0=left, 1=right
- top : 0.5, //any float : 0=top, 1=bottom
- offset : 10 //px to add to each side (+/-)
- duration : 400 //number in ms
- horizontal : true //boolean
- vertical : true //boolean
});