YouTip

## Default Functionality Enable the resizable functionality on any DOM element. Drag the right or bottom border to the desired width or height. #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } $(function() { $( "#resizable" ).resizable(); }); ## Animate Use the `animate` option (boolean) to animate the resizing behavior. When this option is set to true, drag the outline to the desired position, and the element will animate to that size when dragging stops. #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-helper { border: 1px dotted gray; } $(function() { $( "#resizable" ).resizable({ animate: true }); }); ## Constrain Resize Area Define the boundaries of the resize area. Use the `containment` option to specify a parent DOM element or a jQuery selector, such as 'document'. #container { width: 300px; height: 300px; } #container h3 { text-align: center; margin: 0; margin-bottom: 10px; } #resizable { background-position: top left; width: 150px; height: 150px; } #resizable, #container { padding: 0.5em; } $(function() { $( "#resizable" ).resizable({ containment: "#container" }); }); ## Delay Start Set the delay in milliseconds before resizing starts using the `delay` option. Use the `distance` option to set the number of pixels the mouse must be pressed and dragged before resizing is allowed. #resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; } #resizable h3, #resizable2 h3 { text-align: center; margin: 0; } $(function() { $( "#resizable" ).resizable({ delay: 1000 }); $( "#resizable2" ).resizable({ distance: 40 }); });

Time Delay (ms):

Distance Delay (px):

## Helper By setting the `helper` option to a CSS class, only the outline of the element is shown during resizing. #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-helper { border: 2px dotted #00F; } $(function() { $( "#resizable" ).resizable({ helper: "ui-resizable-helper" }); }); ## Max/Min Size Use the `maxHeight`, `maxWidth`, `minHeight`, and `minWidth` options to limit the maximum or minimum height or width of the resizable element. #resizable { width: 200px; height: 150px; padding: 5px; } #resizable h3 { text-align: center; margin: 0; } $(function() { $( "#resizable" ).resizable({ maxHeight: 250, maxWidth: 350, minHeight: 150, minWidth: 200 }); }); ## Maintain Aspect Ratio Maintain the existing aspect ratio or set a new aspect ratio to limit the resize ratio. Set the `aspectRatio` option to true, and optionally pass a new ratio (e.g., 4/3). #resizable { width: 160px; height: 90px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } $(function() { $( "#resizable" ).resizable({ aspectRatio: 16 / 9 }); }); ## Snap to Grid Snap the resizable element to a grid. Set the size of the grid cells (height and width in pixels) using the `grid` option. #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } $(function() { $( "#resizable" ).resizable({ grid: 50 }); }); ## Synchronized Resizing Resize multiple elements simultaneously by clicking and dragging an edge of one element. Pass a shared selector to the `alsoResize` option. #resizable { background-position: top left; } #resizable, #also { width: 150px; height: 120px; padding: 0.5em; } #resizable h3, #also h3 { text-align: center; margin: 0; } #also { margin-top: 1em; } $(function() { $( "#resizable" ).resizable({ alsoResize: "#also" }); $( "#also" ).resizable(); }); ## Textarea A resizable textarea. .ui-resizable-se { bottom: 17px; } $(function() { $( "#resizable" ).resizable({ handles: "se" }); }); ## Visual Feedback By setting the `ghost` option to true, a semi-transparent element is shown during resizing instead of the actual element. #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-ghost { border: 1px dotted gray; } $(function() { $( "#resizable" ).resizable({ ghost: true }); });