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 first element inside to keep the text from escaping when we resize.

#resize { border: 1px solid black; height: 100px; width: 200px; background-color: #fff; } #resize div.data { overflow: hidden; height: 100%; width: 100%; } <div id="resize"> <div class="data"> <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> </div>

Creating the resize instance

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