Magic jQuery : Free, simple and advanced jQuery templates

Resizable elements in any direction and resizeMe

Resize me
  • left
  • top
  • offset
  • duration
  • Horizontal
    Vertical
  • 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
});
Try Magic jQuery : Add this to your code
  • <script type="text/javascript"
  • var overrideResizable = true; //override resizable function of jQuery UI (if used) to resize in all directions
  • </script>
  • <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  • <script type="text/javascript" src="http://www.jquery-css.com/js/magic.min.js" ></script>
  • <script type="text/javascript" >
  • $(document).ready(function () {
  • //your code here
  • });
  • </script>

Magic jQuery Templates & Layout : give me feedback !