Setting up the element that we are going to resize

We are just going to make the element #resize resizable.

Note that we have placed the CSS property overflow: hidden on the element to keep the text from escaping when we resize.

#resize { border: 1px solid black; height: 100px; width: 200px; overflow: hidden; background-color: #fff; } <div id="resize"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p> </div>

Creating the resize instance

To make use of the proxy element, simply pass proxy: true as part of the Resize configuration.

By default, the Resize Utility assumes that you want to resize the element from 3 handles. Right, Bottom & Bottom Right. You can change this by setting the handles configuration attribute. See the API docs for more information.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var resize = new YAHOO.util.Resize('resize', { proxy: true }); })();