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 }); })();

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.