YUI Library: Resize Utility [beta] 2008-2-19b v2.

5
Simple Use Case: YAHOO.util.Resize Resize Events YAHOO.util.Resize:
Event Fires...
Methods
Markup:
<div id="resizeMe"><p>Lorem ipsum dragEvent Fires when the DragDrop dragEvent is fired for the config option getActiveHandleEl() Get the
draggable. HTML reference for the currently
dolor</p></div> active resize handle.
startResize Fires when a resize action is started.
getProxyEl() Get the HTML
Script: beforeResize Fires before every element resize, after the size calculations reference for the proxy, returns null
var resize = new YAHOO.util.Resize('resizeMe'); have been done. Returning false will cancel the resize. if no proxy.
resize Fires on event element resize (only fires once when used with getResizeById() Get a resize
Creates a Resize instance with default configurations. proxy config setting) object by the HTML id of the
element associated with the Resize
proxyResize Fires on every element resize (only fires when used with proxy object.
config setting).
getStatusEl() Get the HTML
All Resize events are Custom Events (see Element docs); subscribe to these events using reference for the status element.
their subscribe method: resize.on(‘resize,fnMyHandler);. getWrapEl() Get the HTML
reference for the wrap element,
Key Resize Configuration Options
returns the current element if not
wrapped.
Option Default Description isActive() Returns true or false if a
resize operation is currently active
proxy false Resize a proxy element instaed of the actual element . on the element.
animate false Indicates whether or not the resize should animate reset() Resets the element to its start
sizes (only works with proxy). state.
status false Should we show the status tooltip. resize() Resizes the element,
handles [‘r’, ‘br’, ‘b’] The handles to use (any combination of): 't', 'b', 'r', 'l', wrapper, or proxy based on the
'bl', 'br', 'tl', 'tr'. Can use a shortcut of All. Note: 8 way data from the handlers.

resizing should be done on an element that is destroy() Destroys the resize object
and all of its elements & listeners.
absolutely positioned.
Constructor: YAHOO.util.Resize ratio false Constrain the resize to a ratio of the current size.
draggable false A convenience method to make the element draggable. Dependencies
YAHOO.util.Resize(str | el ref container[, obj
Most of Resize options can be set in the constructor's second argument (eg, The Resize Utility requires
config]) {animate: true}) or at runtime via set (eg, resize.set("animate", true);). Yahoo, Dom, Element,
Arguments: Event, DragDrop and
(1) Element: The element to make resizable. Resize Handles Animation (optional).
(2) Configuration object: When instantiating Resize, you can
pass all configurations in as an object argument or configure The Resize Utility supports the following handle positions: Top, Bottom,
the instance after instantiation. See Configuration Options Left, Right, Top Right, Top Left, Bottom Right, Bottom Left. The default
section for common configuration object members. handle positions are: Right, Bottom, and Bottom Right.
The default look of the handles is to take up all available space around
Solutions: Customizing the Proxy Element the element to be resized. There are a few configuration options built in
that will alter this look:
The following code demonstrates customization of the proxy
element. • hiddenHandles - Handles are always transparent, the user gets
feedback from the cursor change.
//instantiate Resize:
• hover - Handles are hidden by default until the user hovers over
var myResize = new YAHOO.util.Resize('resizeMe', {
proxy: true them, then they appear.
}); • knobHandles - Used for the classic 8-way resize.

//customize proxy during resize via innerHTML:

Take a look at the Resize Utility's examples for demos of all of these
myResize.on('startResize', function() { options.
myResize.getProxyEl().innerHTML = 'I am the proxy'; Note: To get the best effect out of using all 8 resize handles, it is
YAHOO.util.Dom.setStyle(myResize.getProxyEl(),
'opacity', ',5');
recommended that the element be absolutely positioned (and if possible
}); be a direct child of the body).