YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Resize Utility: Animated Proxy Resize

# Resize Utility: Animated Proxy Resize

This example shows how to make a DIV resizable, using a proxy element and animation.

View example in new window.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.

## 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.

### Resize Utility Examples:

- Simple Resize
- Proxy Resize
- Animated Proxy Resize
- 8-way Element Resize
- Ghosting and Custom Proxy Resize
- Custom resizing for the Rich Text Editor
- Split Pane resizing with Grids CSS
- Skinning the Resize Utility
- Layout inside a resizable Panel (included with examples for Layout Manager)
- Creating a Resizable Panel (included with examples for Container Family)
- Complex Application (included with examples for Layout Manager)

### More Resize Utility Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings