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.

Note: You must use the proxy option if you want to use the animate option.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var resize = new YAHOO.util.Resize('resize', { proxy: true, animate: true, animateDuration: .75, animateEasing: YAHOO.util.Easing.backBoth }); })();