The Resize utility turns any block DOM element, usually a <div>
, into a resizable panel. It does so by adding a set of slim handles, by default to the right, bottom, and lower-right corner of the element to be resized, and using Drag-and-Drop on those handles, it adjusts the width and height of that element. To resize an element such as this:
<div id="resizableBlock"><p>Lorem ipsum … </p></div>
this is all the code that is required:
var resizableBlock = new YAHOO.util.Resize("resizableBlock");
The resizer adds no border to the resizable block and it starts from whatever its initial size might be. It is usually better to add some styling to the block. Also, if the left and/or top edges are to be dragged, the block element has to be absolutely positioned.
#resizableBlock { height: 200px; width: 200px; border: thin solid silver; padding:5px; /* required if top or left borders are handles */ position:absolute; }
The constructor can also take a second...