YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Resize Utility: Ghosting and Custom Proxy Resize

# Resize Utility: Ghosting and Custom Proxy Resize

This example shows how to use ghosting and manipulate the proxy element.

View example in new window.

## Setting up the element that we are going to resize

We are going to make the element `#yui_img` resizable in all 8 directions.

Note: When you want to resize an element that requires the top and left sides to be positioned, it is best practice to make the element `position: absolute`. Otherwise it will be positioned relative and the outcome will not be what you expected.

#yui_img { position: absolute; top: 20px; left: 20px; } <img src="assets/yui.jpg" id="yui_img" height="166" width="250">

## Creating the resize instance

Since an image cannot have child nodes appended to it, the Resize Utility will auto wrap it with an element that can. See the API docs for more info on the wrap option.

For shorthand, we are using the `handles` type of `All`, which just simply means `t, r, b, l, tr, tl, br, bl`. We are also using the config `knobHandles`, this applies a class to the Resize element and styles all of the handles into the small knobs seen above.

In this instance we have also turned on the following options:

- `draggable`, this will allow the element to be dragged.
- `ghost`, this will apply a classname of `.yui-resize-ghost` to the parent for styling with opacity.
- `status`, this is what turns on the yellow tooltip that follows the mouse when resizing.
- `animate`, turns on animation for the resize.
- `animateDuration`, the duration of the animation.
- `animateEasing`, the easing method to apply to the animation instance.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var resize = new YAHOO.util.Resize('yui_img', { handles: 'all', knobHandles: true, height: '166px', width: '250px', proxy: true, ghost: true, status: true, draggable: true, animate: true, animateDuration: .75, animateEasing: YAHOO.util.Easing.backBoth }); })();

## Customizing the proxy element

For this example, we want to make it look like the proxy is a copy of the image we are resizing.

We do this by subscribing to the `startResize` Event, and manipulating the proxy element with normal DOM scripting.

resize.on('startResize', function() { this.getProxyEl().innerHTML = '<img src="' + this.get('element').src + '" style="height: 100%; width: 100%;">'; Dom.setStyle(this.getProxyEl().firstChild, 'opacity', '.25'); }, resize, true);

## Full example code

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var resize = new YAHOO.util.Resize('yui_img', { handles: 'all', knobHandles: true, height: '166px', width: '250px', proxy: true, ghost: true, status: true, draggable: true, animate: true, animateDuration: .75, animateEasing: YAHOO.util.Easing.backBoth }); resize.on('startResize', function() { this.getProxyEl().innerHTML = '<img src="' + this.get('element').src + '" style="height: 100%; width: 100%;">'; Dom.setStyle(this.getProxyEl().firstChild, 'opacity', '.25'); }, resize, true); })();

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

### More Resize Utility Resources:

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

Copyright © 2009 Yahoo! Inc. All rights reserved.

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