webgui/www/extras/yui/docs/YAHOO.util.Resize.html
Chris Nehren 8fdd413d12 * resizable text areas now use the YUI 2.5.0 code
* add the new YUI release
* document the change in both the changelog and gotcha.txt
2008-02-26 21:27:14 +00:00

5613 lines
277 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>API: resize YAHOO.util.Resize (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="assets/api.css">
<script type="text/javascript" src="assets/api-js"></script>
<script type="text/javascript" src="assets/ac-js"></script>
</head>
<body id="yahoo-com">
<div id="doc3" class="yui-t2">
<div id="hd">
<a href="http://developer.yahoo.com/yui/"><h1>Yahoo! UI Library</h1></a>
<h3>resize&nbsp; <span class="subtitle">2.5.0</span></h3>
<p>
<a href="./index.html">Yahoo! UI Library</a>
&gt; <a href="./module_resize.html">resize</a>
&gt; YAHOO.util.Resize
</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<form name="yui-classopts-form">
<span id="classopts"><input type="checkbox" name="showprivate" id="showprivate" /> Show Private</span>
<span id="classopts"><input type="checkbox" name="showprotected" id="showprotected" /> Show Protected</span>
</form>
<h2>
Class <b>YAHOO.util.Resize</b>
<span class="extends">
- extends <a href="YAHOO.util.Element.html">YAHOO.util.Element</a>
</span>
<span class="extends">
</span>
</code>
</h2>
<!-- class tree goes here -->
<div class="summary description">
<p>Makes an element resizable</p>
</div>
<div class="section constructor details">
<h3 id="constructor">Constructor</h3>
<div class="content">
<div class="detail">
<strong>YAHOO.util.Resize</strong>
<code>
(
el
,
attrs
)
</code>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el
&lt;String/HTMLElement&gt;
</code>
The element to make resizable.
</dd>
<dd>
<code>attrs
&lt;Object&gt;
</code>
Object liternal containing configuration parameters.
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="section field details">
<h3 id="properties">Properties</h3>
<div class="content">
<div class="private">
<h4><a name="_active">_active</a>
<code>- private Boolean</code>
</h4>
<div class="detail">
<div class="description">
Flag to show if the resize is active. Used for events.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="_cache">_cache</a>
<code>- private Object</code>
</h4>
<div class="detail">
<div class="description">
An lookup table containing key information for the element being resized. e.g. height, width, x position, y position, etc..
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="_currentDD">_currentDD</a>
<code>- private Object</code>
</h4>
<div class="detail">
<div class="description">
A link to the currently active DD object
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="_currentHandle">_currentHandle</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
The string identifier of the currently active handle. e.g. 'r', 'br', 'tl'
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="_dds">_dds</a>
<code>- private Object</code>
</h4>
<div class="detail">
<div class="description">
An Object containing references to all of the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> instances used for the resize handles
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="_handles">_handles</a>
<code>- private Object</code>
</h4>
<div class="detail">
<div class="description">
An object containing references to all of the resize handles.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="_ieSelectBack">_ieSelectBack</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
We will hold a copy of the current "onselectstart" method on this property, and reset it after we are done using it.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="_instances">_instances</a>
<code>- private static Object</code>
</h4>
<div class="detail">
<div class="description">
Internal hash table for all resize instances
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="_positioned">_positioned</a>
<code>- private Boolean</code>
</h4>
<div class="detail">
<div class="description">
A flag to show if the element is absolutely positioned
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="_proxy">_proxy</a>
<code>- private HTMLElement</code>
</h4>
<div class="detail">
<div class="description">
The HTML reference of the element proxy
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="_resizeEvent">_resizeEvent</a>
<code>- private Event</code>
</h4>
<div class="detail">
<div class="description">
The mouse event used to resize with
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="_wrap">_wrap</a>
<code>- private HTMLElement</code>
</h4>
<div class="detail">
<div class="description">
The HTML reference of the element wrapper
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="browser">browser</a>
<code>- private Object</code>
</h4>
<div class="detail">
<div class="description">
A copy of the YAHOO.env.ua property
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="CSS_DRAG">CSS_DRAG</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Class name added when dragging is enabled
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="CSS_GHOST">CSS_GHOST</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Class name given to the wrap element when the ghost property is active
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="CSS_HANDLE">CSS_HANDLE</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Class name given to all handles, used as a base for single handle names as well.. Handle "t" will get this.CSS_HANDLE + '-t' as well as this.CSS_HANDLE
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="CSS_HIDDEN">CSS_HIDDEN</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Class name given to the wrap element to make all handles hidden
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="CSS_HOVER">CSS_HOVER</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Class name used for hover only handles
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="CSS_KNOB">CSS_KNOB</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Class name used to make the knob style handles
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="CSS_PROXY">CSS_PROXY</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Class name given to the proxy element
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="CSS_RESIZE">CSS_RESIZE</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Base CSS class name
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="CSS_RESIZING">CSS_RESIZING</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Class name given to the wrap element when a resize action is taking place.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="CSS_STATUS">CSS_STATUS</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Class name given to the status element
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="CSS_WRAP">CSS_WRAP</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Class name given to the wrap element
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="dd">dd</a>
<code>- private Object</code>
</h4>
<div class="detail">
<div class="description">
The <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> instance used if draggable is true
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Properties inherited from <a href="YAHOO.util.Element.html">YAHOO.util.Element</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.util.Element.html#DOM_EVENTS">DOM_EVENTS</a>
</code>
</div>
</div>
<div class="section field inheritance">
<h4>Properties inherited from <a href="YAHOO.util.AttributeProvider.html">YAHOO.util.AttributeProvider</a>:</h4>
<div class="content">
<code>
<a class="private" href="YAHOO.util.AttributeProvider.html#_configs">_configs</a>
</code>
</div>
</div>
<div class="section field inheritance">
<h4>Properties inherited from <a href="YAHOO.util.EventProvider.html">YAHOO.util.EventProvider</a>:</h4>
<div class="content">
<code>
<a class="private" href="YAHOO.util.EventProvider.html#__yui_events">__yui_events</a><span class="private">,</span>
<a class="private" href="YAHOO.util.EventProvider.html#__yui_subscribers">__yui_subscribers</a>
</code>
</div>
</div>
<div class="section method details">
<h3 id="methods">Methods</h3>
<div class="content">
<div class="private">
<h4>
<a name="_checkHeight">_checkHeight</a></h4>
<div class="detail">
<code>
private
Number
<strong>_checkHeight</strong>
(
h
)
</code>
<div class="description">
Checks the value passed against the maxHeight and minHeight.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>h &lt;Number&gt;</code>
The height to check.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The new value</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_checkWidth">_checkWidth</a></h4>
<div class="detail">
<code>
private
Number
<strong>_checkWidth</strong>
(
w
)
</code>
<div class="description">
Checks the value passed against the maxWidth and minWidth.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>w &lt;Number&gt;</code>
The width to check.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>the new value</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_createHandles">_createHandles</a></h4>
<div class="detail">
<code>
private
void
<strong>_createHandles</strong>
(
)
</code>
<div class="description">
Creates the handles as specified in the config
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_createProxy">_createProxy</a></h4>
<div class="detail">
<code>
private
void
<strong>_createProxy</strong>
(
)
</code>
<div class="description">
Creates the proxy element if the proxy config is true
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_createWrap">_createWrap</a></h4>
<div class="detail">
<code>
private
void
<strong>_createWrap</strong>
(
)
</code>
<div class="description">
Creates the wrap element if the wrap config is true. It will auto wrap the following element types: img, textarea, input, iframe, select
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handle_for_b">_handle_for_b</a></h4>
<div class="detail">
<code>
private
void
<strong>_handle_for_b</strong>
(
args
)
</code>
<div class="description">
Handles the sizes for the Bottom handle.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>args &lt;Object&gt;</code>
The arguments from the CustomEvent.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handle_for_bl">_handle_for_bl</a></h4>
<div class="detail">
<code>
private
void
<strong>_handle_for_bl</strong>
(
args
)
</code>
<div class="description">
Handles the sizes for the Bottom Left handle.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>args &lt;Object&gt;</code>
The arguments from the CustomEvent.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handle_for_br">_handle_for_br</a></h4>
<div class="detail">
<code>
private
void
<strong>_handle_for_br</strong>
(
args
)
</code>
<div class="description">
Handles the sizes for the Bottom Right handle.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>args &lt;Object&gt;</code>
The arguments from the CustomEvent.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handle_for_l">_handle_for_l</a></h4>
<div class="detail">
<code>
private
void
<strong>_handle_for_l</strong>
(
args
)
</code>
<div class="description">
Handles the sizes for the Left handle.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>args &lt;Object&gt;</code>
The arguments from the CustomEvent.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handle_for_r">_handle_for_r</a></h4>
<div class="detail">
<code>
private
void
<strong>_handle_for_r</strong>
(
args
)
</code>
<div class="description">
Handles the sizes for the Right handle.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>args &lt;Object&gt;</code>
The arguments from the CustomEvent.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handle_for_t">_handle_for_t</a></h4>
<div class="detail">
<code>
private
void
<strong>_handle_for_t</strong>
(
args
)
</code>
<div class="description">
Handles the sizes for the Top handle.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>args &lt;Object&gt;</code>
The arguments from the CustomEvent.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handle_for_tl">_handle_for_tl</a></h4>
<div class="detail">
<code>
private
void
<strong>_handle_for_tl</strong>
(
args
)
</code>
<div class="description">
Handles the sizes for the Top Left handle.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>args &lt;Object&gt;</code>
The arguments from the CustomEvent.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handle_for_tr">_handle_for_tr</a></h4>
<div class="detail">
<code>
private
void
<strong>_handle_for_tr</strong>
(
args
)
</code>
<div class="description">
Handles the sizes for the Top Right handle.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>args &lt;Object&gt;</code>
The arguments from the CustomEvent.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handleMouseDown">_handleMouseDown</a></h4>
<div class="detail">
<code>
private
void
<strong>_handleMouseDown</strong>
(
ev
)
</code>
<div class="description">
This method preps the autoRatio on MouseDown.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
A mouse event.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handleMouseOut">_handleMouseOut</a></h4>
<div class="detail">
<code>
private
void
<strong>_handleMouseOut</strong>
(
ev
)
</code>
<div class="description">
Removes CSS class names to the handles
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
A mouse event.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handleMouseOver">_handleMouseOver</a></h4>
<div class="detail">
<code>
private
void
<strong>_handleMouseOver</strong>
(
ev
)
</code>
<div class="description">
Adds CSS class names to the handles
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
A mouse event.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handleMouseUp">_handleMouseUp</a></h4>
<div class="detail">
<code>
private
void
<strong>_handleMouseUp</strong>
(
ev
)
</code>
<div class="description">
Cleans up listeners, hides proxy element and removes class names.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
A mouse event.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_handleStartDrag">_handleStartDrag</a></h4>
<div class="detail">
<code>
private
void
<strong>_handleStartDrag</strong>
(
args
,
dd
)
</code>
<div class="description">
Resizes the proxy, sets up the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> handlers, updates the status div and preps the cache
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>args &lt;Object&gt;</code>
The args passed from the CustomEvent.
</dd>
<dd>
<code>dd &lt;Object&gt;</code>
The <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> object we are working with.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_ieSelectFix">_ieSelectFix</a></h4>
<div class="detail">
<code>
private
void
<strong>_ieSelectFix</strong>
(
)
</code>
<div class="description">
The function we use as the onselectstart handler when we start a drag in Internet Explorer
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_setAutoRatio">_setAutoRatio</a></h4>
<div class="detail">
<code>
private
void
<strong>_setAutoRatio</strong>
(
ev
)
</code>
<div class="description">
This method checks to see if the "autoRatio" config is set. If it is, we will check to see if the "Shift Key" is pressed. If so, we will set the config ratio to true.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
A mouse event.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_setCache">_setCache</a></h4>
<div class="detail">
<code>
private
void
<strong>_setCache</strong>
(
)
</code>
<div class="description">
Sets up the this._cache hash table.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_setHeight">_setHeight</a></h4>
<div class="detail">
<code>
private
Number
<strong>_setHeight</strong>
(
ev
,
flip
)
</code>
<div class="description">
Calculated the height based on the mouse event.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
The mouse event.
</dd>
<dd>
<code>flip &lt;Boolean&gt;</code>
Argument to determine the direction of the movement.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The new value</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_setRatio">_setRatio</a></h4>
<div class="detail">
<code>
private
Array
<strong>_setRatio</strong>
(
h
,
w
,
t
,
l
)
</code>
<div class="description">
Using the Height, Width, Top & Left, it recalcuates them based on the original element size.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>h &lt;Number&gt;</code>
The height offset.
</dd>
<dd>
<code>w &lt;Number&gt;</code>
The with offset.
</dd>
<dd>
<code>t &lt;Number&gt;</code>
The top offset.
</dd>
<dd>
<code>l &lt;Number&gt;</code>
The left offset.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Array
</code></dt>
<dd>The new Height, Width, Top & Left settings</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_setupDragDrop">_setupDragDrop</a></h4>
<div class="detail">
<code>
private
void
<strong>_setupDragDrop</strong>
(
)
</code>
<div class="description">
Setup the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> instance on the element
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_setWidth">_setWidth</a></h4>
<div class="detail">
<code>
private
Number
<strong>_setWidth</strong>
(
ev
,
flip
)
</code>
<div class="description">
Calculates the width based on the mouse event.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
The mouse event.
</dd>
<dd>
<code>flip &lt;Boolean&gt;</code>
Argument to determine the direction of the movement.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The new value</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_snapTick">_snapTick</a></h4>
<div class="detail">
<code>
private
Number
<strong>_snapTick</strong>
(
size
,
pix
)
</code>
<div class="description">
Adjusts the number based on the ticks used.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>size &lt;Number&gt;</code>
The size to tick against.
</dd>
<dd>
<code>pix &lt;Number&gt;</code>
The tick pixels.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>the new snapped position</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="_updateStatus">_updateStatus</a></h4>
<div class="detail">
<code>
private
void
<strong>_updateStatus</strong>
(
h
,
w
,
t
,
l
)
</code>
<div class="description">
Using the Height, Width, Top & Left, it updates the status element with the elements sizes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>h &lt;Number&gt;</code>
The new height setting.
</dd>
<dd>
<code>w &lt;Number&gt;</code>
The new width setting.
</dd>
<dd>
<code>t &lt;Number&gt;</code>
The new top setting.
</dd>
<dd>
<code>l &lt;Number&gt;</code>
The new left setting.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="destroy">destroy</a></h4>
<div class="detail">
<code>
void
<strong>destroy</strong>
(
)
</code>
<div class="description">
Destroys the resize object and all of it's elements & listeners.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="getActiveHandleEl">getActiveHandleEl</a></h4>
<div class="detail">
<code>
HTMLElement
<strong>getActiveHandleEl</strong>
(
)
</code>
<div class="description">
Get the HTML reference for the currently active resize handle.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
HTMLElement
</code></dt>
<dd>The handle element that is active</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="getProxyEl">getProxyEl</a></h4>
<div class="detail">
<code>
HTMLElement
<strong>getProxyEl</strong>
(
)
</code>
<div class="description">
Get the HTML reference for the proxy, returns null if no proxy.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
HTMLElement
</code></dt>
<dd>The proxy element</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="getResizeById">getResizeById</a></h4>
<div class="detail">
<code>
static
Object
<strong>getResizeById</strong>
(
)
</code>
<div class="description">
Get's a resize object by the HTML id of the element associated with the Resize object.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
Object
</code></dt>
<dd>The Resize Object</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="getStatusEl">getStatusEl</a></h4>
<div class="detail">
<code>
HTMLElement
<strong>getStatusEl</strong>
(
)
</code>
<div class="description">
Get the HTML reference for the status element.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
HTMLElement
</code></dt>
<dd>The status element</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="getWrapEl">getWrapEl</a></h4>
<div class="detail">
<code>
HTMLElement
<strong>getWrapEl</strong>
(
)
</code>
<div class="description">
Get the HTML reference for the wrap element, returns the current element if not wrapped.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
HTMLElement
</code></dt>
<dd>The wrap element</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="init">init</a></h4>
<div class="detail">
<code>
private
void
<strong>init</strong>
(
)
</code>
<div class="description">
The Resize class's initialization method
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="initAttributes">initAttributes</a></h4>
<div class="detail">
<code>
private
void
<strong>initAttributes</strong>
(
attr
)
</code>
<div class="description">
Initializes all of the configuration attributes used to create a resizable element.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>attr &lt;Object&gt;</code>
Object literal specifying a set of
configuration attributes used to create the utility.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="isActive">isActive</a></h4>
<div class="detail">
<code>
Boolean
<strong>isActive</strong>
(
)
</code>
<div class="description">
Returns true or false if a resize operation is currently active on the element.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="reset">reset</a></h4>
<div class="detail">
<code>
<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>
<strong>reset</strong>
(
)
</code>
<div class="description">
Resets the element to is start state.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>
</code></dt>
<dd>The Resize instance</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="resize">resize</a></h4>
<div class="detail">
<code>
<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>
<strong>resize</strong>
(
ev
,
h
,
w
,
t
,
l
,
force
)
</code>
<div class="description">
Resizes the element, wrapper or proxy based on the data from the handlers.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
The mouse event.
</dd>
<dd>
<code>h &lt;Number&gt;</code>
The new height setting.
</dd>
<dd>
<code>w &lt;Number&gt;</code>
The new width setting.
</dd>
<dd>
<code>t &lt;Number&gt;</code>
The new top setting.
</dd>
<dd>
<code>l &lt;Number&gt;</code>
The new left setting.
</dd>
<dd>
<code>force &lt;Boolean&gt;</code>
Resize the element (used for proxy resize).
</dd>
</dl>
<dl>
<dt>Returns:
<code>
<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>
</code></dt>
<dd>The Resize instance</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="toString">toString</a></h4>
<div class="detail">
<code>
String
<strong>toString</strong>
(
)
</code>
<div class="description">
Returns a string representing the Resize Object.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
String
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Methods inherited from <a href="YAHOO.util.Element.html">YAHOO.util.Element</a>:</h4>
<div class="content">
<code>
<a class="private" href="YAHOO.util.Element.html#_registerHTMLAttr">_registerHTMLAttr</a><span class="private">,</span> <a class="" href="YAHOO.util.Element.html#addClass">addClass</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#addListener">addListener</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#appendChild">appendChild</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#appendTo">appendTo</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#fireQueue">fireQueue</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#getElementsByClassName">getElementsByClassName</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#getElementsByTagName">getElementsByTagName</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#getStyle">getStyle</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#hasChildNodes">hasChildNodes</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#hasClass">hasClass</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#initAttributes">initAttributes</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#insertBefore">insertBefore</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#on">on</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#removeChild">removeChild</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#removeClass">removeClass</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#removeListener">removeListener</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#replaceChild">replaceChild</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#replaceClass">replaceClass</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#setStyle">setStyle</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#subscribe">subscribe</a>
</code>
</div>
</div>
<div class="section field inheritance">
<h4>Methods inherited from <a href="YAHOO.util.AttributeProvider.html">YAHOO.util.AttributeProvider</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.util.AttributeProvider.html#configureAttribute">configureAttribute</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#fireBeforeChangeEvent">fireBeforeChangeEvent</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#fireChangeEvent">fireChangeEvent</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#get">get</a><span class="">,</span> <a class="private" href="YAHOO.util.AttributeProvider.html#getAttributeConfig">getAttributeConfig</a><span class="private">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#getAttributeKeys">getAttributeKeys</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#refresh">refresh</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#register">register</a><span class="">,</span> <a class="private" href="YAHOO.util.AttributeProvider.html#resetAttributeConfig">resetAttributeConfig</a><span class="private">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#resetValue">resetValue</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#set">set</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#setAttributeConfig">setAttributeConfig</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#setAttributes">setAttributes</a>
</code>
</div>
</div>
<div class="section field inheritance">
<h4>Methods inherited from <a href="YAHOO.util.EventProvider.html">YAHOO.util.EventProvider</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.util.EventProvider.html#createEvent">createEvent</a><span class="">,</span> <a class="" href="YAHOO.util.EventProvider.html#fireEvent">fireEvent</a><span class="">,</span> <a class="" href="YAHOO.util.EventProvider.html#hasEvent">hasEvent</a><span class="">,</span> <a class="" href="YAHOO.util.EventProvider.html#subscribe">subscribe</a><span class="">,</span> <a class="" href="YAHOO.util.EventProvider.html#unsubscribe">unsubscribe</a><span class="">,</span> <a class="" href="YAHOO.util.EventProvider.html#unsubscribeAll">unsubscribeAll</a>
</code>
</div>
</div>
<div class="section method details">
<h3 id="events">Events</h3>
<div class="content">
<div class="">
<h4>
<a name="animateChange">animateChange</a></h4>
<div class="detail">
<code>
<strong>animateChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'animate' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="animateDurationChange">animateDurationChange</a></h4>
<div class="detail">
<code>
<strong>animateDurationChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'animateDuration' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="animateEasingChange">animateEasingChange</a></h4>
<div class="detail">
<code>
<strong>animateEasingChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'animateEasing' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="autoRatioChange">autoRatioChange</a></h4>
<div class="detail">
<code>
<strong>autoRatioChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'autoRatio' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeAnimateChange">beforeAnimateChange</a></h4>
<div class="detail">
<code>
<strong>beforeAnimateChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'animate' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeAnimatedurationChange">beforeAnimatedurationChange</a></h4>
<div class="detail">
<code>
<strong>beforeAnimatedurationChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'animateDuration' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeAnimateeasingChange">beforeAnimateeasingChange</a></h4>
<div class="detail">
<code>
<strong>beforeAnimateeasingChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'animateEasing' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeAutoratioChange">beforeAutoratioChange</a></h4>
<div class="detail">
<code>
<strong>beforeAutoratioChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'autoRatio' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeDraggableChange">beforeDraggableChange</a></h4>
<div class="detail">
<code>
<strong>beforeDraggableChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'draggable' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeGhostChange">beforeGhostChange</a></h4>
<div class="detail">
<code>
<strong>beforeGhostChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'ghost' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeHandlesChange">beforeHandlesChange</a></h4>
<div class="detail">
<code>
<strong>beforeHandlesChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'handles' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeHeightChange">beforeHeightChange</a></h4>
<div class="detail">
<code>
<strong>beforeHeightChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'height' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeHiddenhandlesChange">beforeHiddenhandlesChange</a></h4>
<div class="detail">
<code>
<strong>beforeHiddenhandlesChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'hiddenHandles' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeHoverChange">beforeHoverChange</a></h4>
<div class="detail">
<code>
<strong>beforeHoverChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'hover' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeKnobhandlesChange">beforeKnobhandlesChange</a></h4>
<div class="detail">
<code>
<strong>beforeKnobhandlesChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'knobHandles' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeMaxheightChange">beforeMaxheightChange</a></h4>
<div class="detail">
<code>
<strong>beforeMaxheightChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'maxHeight' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeMaxwidthChange">beforeMaxwidthChange</a></h4>
<div class="detail">
<code>
<strong>beforeMaxwidthChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'maxWidth' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeMaxxChange">beforeMaxxChange</a></h4>
<div class="detail">
<code>
<strong>beforeMaxxChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'maxX' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeMaxyChange">beforeMaxyChange</a></h4>
<div class="detail">
<code>
<strong>beforeMaxyChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'maxY' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeMinheightChange">beforeMinheightChange</a></h4>
<div class="detail">
<code>
<strong>beforeMinheightChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'minHeight' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeMinwidthChange">beforeMinwidthChange</a></h4>
<div class="detail">
<code>
<strong>beforeMinwidthChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'minWidth' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeMinxChange">beforeMinxChange</a></h4>
<div class="detail">
<code>
<strong>beforeMinxChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'minX' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeMinyChange">beforeMinyChange</a></h4>
<div class="detail">
<code>
<strong>beforeMinyChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'minY' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeProxyChange">beforeProxyChange</a></h4>
<div class="detail">
<code>
<strong>beforeProxyChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'proxy' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeRatioChange">beforeRatioChange</a></h4>
<div class="detail">
<code>
<strong>beforeRatioChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'ratio' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeResize">beforeResize</a></h4>
<div class="detail">
<code>
<strong>beforeResize</strong>
(
)
</code>
<div class="description">
Fires before every element resize after the size calculations, returning false will stop the resize.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeSetsizeChange">beforeSetsizeChange</a></h4>
<div class="detail">
<code>
<strong>beforeSetsizeChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'setSize' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeStatusChange">beforeStatusChange</a></h4>
<div class="detail">
<code>
<strong>beforeStatusChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'status' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeWidthChange">beforeWidthChange</a></h4>
<div class="detail">
<code>
<strong>beforeWidthChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'width' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeWrapChange">beforeWrapChange</a></h4>
<div class="detail">
<code>
<strong>beforeWrapChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'wrap' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeXticksChange">beforeXticksChange</a></h4>
<div class="detail">
<code>
<strong>beforeXticksChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'xTicks' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="beforeYticksChange">beforeYticksChange</a></h4>
<div class="detail">
<code>
<strong>beforeYticksChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'yTicks' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the current attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="dragEvent">dragEvent</a></h4>
<div class="detail">
<code>
<strong>dragEvent</strong>
(
)
</code>
<div class="description">
Fires when the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> dragEvent is fired for the config option draggable.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="draggableChange">draggableChange</a></h4>
<div class="detail">
<code>
<strong>draggableChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'draggable' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="ghostChange">ghostChange</a></h4>
<div class="detail">
<code>
<strong>ghostChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'ghost' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="handlesChange">handlesChange</a></h4>
<div class="detail">
<code>
<strong>handlesChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'handles' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="heightChange">heightChange</a></h4>
<div class="detail">
<code>
<strong>heightChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'height' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="hiddenHandlesChange">hiddenHandlesChange</a></h4>
<div class="detail">
<code>
<strong>hiddenHandlesChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'hiddenHandles' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="hoverChange">hoverChange</a></h4>
<div class="detail">
<code>
<strong>hoverChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'hover' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="knobHandlesChange">knobHandlesChange</a></h4>
<div class="detail">
<code>
<strong>knobHandlesChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'knobHandles' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="maxHeightChange">maxHeightChange</a></h4>
<div class="detail">
<code>
<strong>maxHeightChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'maxHeight' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="maxWidthChange">maxWidthChange</a></h4>
<div class="detail">
<code>
<strong>maxWidthChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'maxWidth' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="maxXChange">maxXChange</a></h4>
<div class="detail">
<code>
<strong>maxXChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'maxX' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="maxYChange">maxYChange</a></h4>
<div class="detail">
<code>
<strong>maxYChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'maxY' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="minHeightChange">minHeightChange</a></h4>
<div class="detail">
<code>
<strong>minHeightChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'minHeight' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="minWidthChange">minWidthChange</a></h4>
<div class="detail">
<code>
<strong>minWidthChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'minWidth' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="minXChange">minXChange</a></h4>
<div class="detail">
<code>
<strong>minXChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'minX' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="minYChange">minYChange</a></h4>
<div class="detail">
<code>
<strong>minYChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'minY' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="proxyChange">proxyChange</a></h4>
<div class="detail">
<code>
<strong>proxyChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'proxy' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="proxyResize">proxyResize</a></h4>
<div class="detail">
<code>
<strong>proxyResize</strong>
(
)
</code>
<div class="description">
Fires on every proxy resize (only fires when used with proxy config setting).
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="ratioChange">ratioChange</a></h4>
<div class="detail">
<code>
<strong>ratioChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'ratio' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="resize">resize</a></h4>
<div class="detail">
<code>
<strong>resize</strong>
(
)
</code>
<div class="description">
Fires on every element resize (only fires once when used with proxy config setting).
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="setSizeChange">setSizeChange</a></h4>
<div class="detail">
<code>
<strong>setSizeChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'setSize' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="startResize">startResize</a></h4>
<div class="detail">
<code>
<strong>startResize</strong>
(
)
</code>
<div class="description">
Fires when when a resize action is started.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="statusChange">statusChange</a></h4>
<div class="detail">
<code>
<strong>statusChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'status' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="widthChange">widthChange</a></h4>
<div class="detail">
<code>
<strong>widthChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'width' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="wrapChange">wrapChange</a></h4>
<div class="detail">
<code>
<strong>wrapChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'wrap' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="xTicksChange">xTicksChange</a></h4>
<div class="detail">
<code>
<strong>xTicksChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'xTicks' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="yTicksChange">yTicksChange</a></h4>
<div class="detail">
<code>
<strong>yTicksChange</strong>
(
eventInfo
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'yTicks' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>eventInfo &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Events inherited from <a href="YAHOO.util.Element.html">YAHOO.util.Element</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.util.Element.html#appendTo">appendTo</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#available">available</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#beforeAppendTo">beforeAppendTo</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#beforeElementChange">beforeElementChange</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#contentReady">contentReady</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#elementChange">elementChange</a><span class="">,</span>
</code>
</div>
</div>
<div class="section field details">
<h3 id="configattributes">Configuration Attributes</h3>
<div class="content">
<div class="">
<h4><a name="animate">animate</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Should be use animation to resize the element (can only be used if we use proxy).
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="animateDuration">animateDuration</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The Duration to apply to the animation.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="animateEasing">animateEasing</a>
<code>- Object</code>
</h4>
<div class="detail">
<div class="description">
The Easing to apply to the animation.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="autoRatio">autoRatio</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Using the shift key during a resize will toggle the ratio config.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="draggable">draggable</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
A convienence method to make the element draggable
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="ghost">ghost</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Apply an opacity filter to the element being resized (only works with proxy).
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="handles">handles</a>
<code>- Array</code>
</h4>
<div class="detail">
<div class="description">
The handles to use (any combination of): 't', 'b', 'r', 'l', 'bl', 'br', 'tl', 'tr'. Defaults to: ['r', 'b', 'br'].
Can use a shortcut of All. Note: 8 way resizing should be done on an element that is absolutely positioned.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="height">height</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The height of the element
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="hiddenHandles">hiddenHandles</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Don't show the handles, just use the cursor to the user.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="hover">hover</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Only show the handles when they are being moused over.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="knobHandles">knobHandles</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Use the smaller handles, instead if the full size handles.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="maxHeight">maxHeight</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The maximum height of the element
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="maxWidth">maxWidth</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The maximum width of the element
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="maxX">maxX</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The max x coord of the element
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="maxY">maxY</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The max y coord of the element
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="minHeight">minHeight</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The minimum height of the element
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="minWidth">minWidth</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The minimum width of the element
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="minX">minX</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The minimum x coord of the element
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="minY">minY</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The minimum y coord of the element
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="proxy">proxy</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Resize a proxy element instead of the real element.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="ratio">ratio</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Maintain the element's ratio when resizing.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="setSize">setSize</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Set the size of the resized element, if set to false the element will not be auto resized,
the resize event will contain the dimensions so the end user can resize it on their own.
This setting will only work with proxy set to true and animate set to false.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="status">status</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Show the status (new size) of the resize.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="width">width</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The width of the element
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="wrap">wrap</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Should we wrap the element
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="xTicks">xTicks</a>
<code>- Number or False</code>
</h4>
<div class="detail">
<div class="description">
The number of x ticks to span the resize to.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="yTicks">yTicks</a>
<code>- Number or False</code>
</h4>
<div class="detail">
<div class="description">
The number of y ticks to span the resize to.
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Configuration attributes inherited from <a href="YAHOO.util.Element.html">YAHOO.util.Element</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.util.Element.html#element">element</a><span class="">,</span>
</code>
</div>
</div>
</div>
</div>
<div class="yui-b">
<div class="nav">
<div class="module">
<h4>Modules</h4>
<ul class="content">
<li class=""><a href="module_animation.html">animation</a></li>
<li class=""><a href="module_autocomplete.html">autocomplete</a></li>
<li class=""><a href="module_button.html">button</a></li>
<li class=""><a href="module_calendar.html">calendar</a></li>
<li class=""><a href="module_charts.html">charts</a></li>
<li class=""><a href="module_colorpicker.html">colorpicker</a></li>
<li class=""><a href="module_connection.html">connection</a></li>
<li class=""><a href="module_container.html">container</a></li>
<li class=""><a href="module_cookie.html">cookie</a></li>
<li class=""><a href="module_datasource.html">datasource</a></li>
<li class=""><a href="module_datatable.html">datatable</a></li>
<li class=""><a href="module_dom.html">dom</a></li>
<li class=""><a href="module_dragdrop.html">dragdrop</a></li>
<li class=""><a href="module_editor.html">editor</a></li>
<li class=""><a href="module_element.html">element</a></li>
<li class=""><a href="module_event.html">event</a></li>
<li class=""><a href="module_get.html">get</a></li>
<li class=""><a href="module_history.html">history</a></li>
<li class=""><a href="module_imagecropper.html">imagecropper</a></li>
<li class=""><a href="module_imageloader.html">imageloader</a></li>
<li class=""><a href="module_json.html">json</a></li>
<li class=""><a href="module_layout.html">layout</a></li>
<li class=""><a href="module_logger.html">logger</a></li>
<li class=""><a href="module_menu.html">menu</a></li>
<li class=""><a href="module_profiler.html">profiler</a></li>
<li class=""><a href="module_profilerviewer.html">profilerviewer</a></li>
<li class="selected"><a href="module_resize.html">resize</a></li>
<li class=""><a href="module_selector.html">selector</a></li>
<li class=""><a href="module_slider.html">slider</a></li>
<li class=""><a href="module_tabview.html">tabview</a></li>
<li class=""><a href="module_treeview.html">treeview</a></li>
<li class=""><a href="module_uploader.html">uploader</a></li>
<li class=""><a href="module_yahoo.html">yahoo</a></li>
<li class=""><a href="module_yuiloader.html">yuiloader</a></li>
<li class=""><a href="module_yuitest.html">yuitest</a></li>
</ul>
</div>
<div class="module">
<h4>Classes</h4>
<ul class="content">
<li class="selected"><a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a></li>
</ul>
</div>
<div class="module">
<h4>Files</h4>
<ul class="content">
<li class=""><a href="resize.js.html">resize.js</a></li>
</ul>
</div>
<div class="module">
<h4>Properties</h4>
<ul class="content">
<li class="private"><a href="#_active">_active</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#_cache">_cache</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#_currentDD">_currentDD</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#_currentHandle">_currentHandle</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#_dds">_dds</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#_handles">_handles</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#_ieSelectBack">_ieSelectBack</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#_instances">_instances</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#_positioned">_positioned</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#_proxy">_proxy</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#_resizeEvent">_resizeEvent</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#_wrap">_wrap</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#browser">browser</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#CSS_DRAG">CSS_DRAG</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#CSS_GHOST">CSS_GHOST</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#CSS_HANDLE">CSS_HANDLE</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#CSS_HIDDEN">CSS_HIDDEN</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#CSS_HOVER">CSS_HOVER</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#CSS_KNOB">CSS_KNOB</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#CSS_PROXY">CSS_PROXY</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#CSS_RESIZE">CSS_RESIZE</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#CSS_RESIZING">CSS_RESIZING</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#CSS_STATUS">CSS_STATUS</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#CSS_WRAP">CSS_WRAP</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
<li class="private"><a href="#dd">dd</a>
<!--<code>&lt;Object&gt;</code>-->
</li>
</ul>
</div>
<div class="module">
<h4>Methods</h4>
<ul class="content">
<li class="private"><!--<code>Number</code>-->
<a href="#_checkHeight">_checkHeight</a>
</li>
<li class="private"><!--<code>Number</code>-->
<a href="#_checkWidth">_checkWidth</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_createHandles">_createHandles</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_createProxy">_createProxy</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_createWrap">_createWrap</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handle_for_b">_handle_for_b</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handle_for_bl">_handle_for_bl</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handle_for_br">_handle_for_br</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handle_for_l">_handle_for_l</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handle_for_r">_handle_for_r</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handle_for_t">_handle_for_t</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handle_for_tl">_handle_for_tl</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handle_for_tr">_handle_for_tr</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handleMouseDown">_handleMouseDown</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handleMouseOut">_handleMouseOut</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handleMouseOver">_handleMouseOver</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handleMouseUp">_handleMouseUp</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_handleStartDrag">_handleStartDrag</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_ieSelectFix">_ieSelectFix</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_setAutoRatio">_setAutoRatio</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_setCache">_setCache</a>
</li>
<li class="private"><!--<code>Number</code>-->
<a href="#_setHeight">_setHeight</a>
</li>
<li class="private"><!--<code>Array</code>-->
<a href="#_setRatio">_setRatio</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_setupDragDrop">_setupDragDrop</a>
</li>
<li class="private"><!--<code>Number</code>-->
<a href="#_setWidth">_setWidth</a>
</li>
<li class="private"><!--<code>Number</code>-->
<a href="#_snapTick">_snapTick</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#_updateStatus">_updateStatus</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#destroy">destroy</a>
</li>
<li class=""><!--<code>HTMLElement</code>-->
<a href="#getActiveHandleEl">getActiveHandleEl</a>
</li>
<li class=""><!--<code>HTMLElement</code>-->
<a href="#getProxyEl">getProxyEl</a>
</li>
<li class=""><!--<code>Object</code>-->
<a href="#getResizeById">getResizeById</a>
</li>
<li class=""><!--<code>HTMLElement</code>-->
<a href="#getStatusEl">getStatusEl</a>
</li>
<li class=""><!--<code>HTMLElement</code>-->
<a href="#getWrapEl">getWrapEl</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#init">init</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#initAttributes">initAttributes</a>
</li>
<li class=""><!--<code>Boolean</code>-->
<a href="#isActive">isActive</a>
</li>
<li class=""><!--<code><a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a></code>-->
<a href="#reset">reset</a>
</li>
<li class=""><!--<code><a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a></code>-->
<a href="#resize">resize</a>
</li>
<li class=""><!--<code>String</code>-->
<a href="#toString">toString</a>
</li>
</ul>
</div>
<div class="module">
<h4>Events</h4>
<ul class="content">
<li class="">
<a href="#animateChange">animateChange</a>
</li>
<li class="">
<a href="#animateDurationChange">animateDurationChange</a>
</li>
<li class="">
<a href="#animateEasingChange">animateEasingChange</a>
</li>
<li class="">
<a href="#autoRatioChange">autoRatioChange</a>
</li>
<li class="">
<a href="#beforeAnimateChange">beforeAnimateChange</a>
</li>
<li class="">
<a href="#beforeAnimatedurationChange">beforeAnimatedurationChange</a>
</li>
<li class="">
<a href="#beforeAnimateeasingChange">beforeAnimateeasingChange</a>
</li>
<li class="">
<a href="#beforeAutoratioChange">beforeAutoratioChange</a>
</li>
<li class="">
<a href="#beforeDraggableChange">beforeDraggableChange</a>
</li>
<li class="">
<a href="#beforeGhostChange">beforeGhostChange</a>
</li>
<li class="">
<a href="#beforeHandlesChange">beforeHandlesChange</a>
</li>
<li class="">
<a href="#beforeHeightChange">beforeHeightChange</a>
</li>
<li class="">
<a href="#beforeHiddenhandlesChange">beforeHiddenhandlesChange</a>
</li>
<li class="">
<a href="#beforeHoverChange">beforeHoverChange</a>
</li>
<li class="">
<a href="#beforeKnobhandlesChange">beforeKnobhandlesChange</a>
</li>
<li class="">
<a href="#beforeMaxheightChange">beforeMaxheightChange</a>
</li>
<li class="">
<a href="#beforeMaxwidthChange">beforeMaxwidthChange</a>
</li>
<li class="">
<a href="#beforeMaxxChange">beforeMaxxChange</a>
</li>
<li class="">
<a href="#beforeMaxyChange">beforeMaxyChange</a>
</li>
<li class="">
<a href="#beforeMinheightChange">beforeMinheightChange</a>
</li>
<li class="">
<a href="#beforeMinwidthChange">beforeMinwidthChange</a>
</li>
<li class="">
<a href="#beforeMinxChange">beforeMinxChange</a>
</li>
<li class="">
<a href="#beforeMinyChange">beforeMinyChange</a>
</li>
<li class="">
<a href="#beforeProxyChange">beforeProxyChange</a>
</li>
<li class="">
<a href="#beforeRatioChange">beforeRatioChange</a>
</li>
<li class="">
<a href="#beforeResize">beforeResize</a>
</li>
<li class="">
<a href="#beforeSetsizeChange">beforeSetsizeChange</a>
</li>
<li class="">
<a href="#beforeStatusChange">beforeStatusChange</a>
</li>
<li class="">
<a href="#beforeWidthChange">beforeWidthChange</a>
</li>
<li class="">
<a href="#beforeWrapChange">beforeWrapChange</a>
</li>
<li class="">
<a href="#beforeXticksChange">beforeXticksChange</a>
</li>
<li class="">
<a href="#beforeYticksChange">beforeYticksChange</a>
</li>
<li class="">
<a href="#dragEvent">dragEvent</a>
</li>
<li class="">
<a href="#draggableChange">draggableChange</a>
</li>
<li class="">
<a href="#ghostChange">ghostChange</a>
</li>
<li class="">
<a href="#handlesChange">handlesChange</a>
</li>
<li class="">
<a href="#heightChange">heightChange</a>
</li>
<li class="">
<a href="#hiddenHandlesChange">hiddenHandlesChange</a>
</li>
<li class="">
<a href="#hoverChange">hoverChange</a>
</li>
<li class="">
<a href="#knobHandlesChange">knobHandlesChange</a>
</li>
<li class="">
<a href="#maxHeightChange">maxHeightChange</a>
</li>
<li class="">
<a href="#maxWidthChange">maxWidthChange</a>
</li>
<li class="">
<a href="#maxXChange">maxXChange</a>
</li>
<li class="">
<a href="#maxYChange">maxYChange</a>
</li>
<li class="">
<a href="#minHeightChange">minHeightChange</a>
</li>
<li class="">
<a href="#minWidthChange">minWidthChange</a>
</li>
<li class="">
<a href="#minXChange">minXChange</a>
</li>
<li class="">
<a href="#minYChange">minYChange</a>
</li>
<li class="">
<a href="#proxyChange">proxyChange</a>
</li>
<li class="">
<a href="#proxyResize">proxyResize</a>
</li>
<li class="">
<a href="#ratioChange">ratioChange</a>
</li>
<li class="">
<a href="#resize">resize</a>
</li>
<li class="">
<a href="#setSizeChange">setSizeChange</a>
</li>
<li class="">
<a href="#startResize">startResize</a>
</li>
<li class="">
<a href="#statusChange">statusChange</a>
</li>
<li class="">
<a href="#widthChange">widthChange</a>
</li>
<li class="">
<a href="#wrapChange">wrapChange</a>
</li>
<li class="">
<a href="#xTicksChange">xTicksChange</a>
</li>
<li class="">
<a href="#yTicksChange">yTicksChange</a>
</li>
</ul>
</div>
<div class="module">
<h4>Configuration Attributes</h4>
<ul class="content">
<li class="">
<a href="#animate">animate</a>
</li>
<li class="">
<a href="#animateDuration">animateDuration</a>
</li>
<li class="">
<a href="#animateEasing">animateEasing</a>
</li>
<li class="">
<a href="#autoRatio">autoRatio</a>
</li>
<li class="">
<a href="#draggable">draggable</a>
</li>
<li class="">
<a href="#ghost">ghost</a>
</li>
<li class="">
<a href="#handles">handles</a>
</li>
<li class="">
<a href="#height">height</a>
</li>
<li class="">
<a href="#hiddenHandles">hiddenHandles</a>
</li>
<li class="">
<a href="#hover">hover</a>
</li>
<li class="">
<a href="#knobHandles">knobHandles</a>
</li>
<li class="">
<a href="#maxHeight">maxHeight</a>
</li>
<li class="">
<a href="#maxWidth">maxWidth</a>
</li>
<li class="">
<a href="#maxX">maxX</a>
</li>
<li class="">
<a href="#maxY">maxY</a>
</li>
<li class="">
<a href="#minHeight">minHeight</a>
</li>
<li class="">
<a href="#minWidth">minWidth</a>
</li>
<li class="">
<a href="#minX">minX</a>
</li>
<li class="">
<a href="#minY">minY</a>
</li>
<li class="">
<a href="#proxy">proxy</a>
</li>
<li class="">
<a href="#ratio">ratio</a>
</li>
<li class="">
<a href="#setSize">setSize</a>
</li>
<li class="">
<a href="#status">status</a>
</li>
<li class="">
<a href="#width">width</a>
</li>
<li class="">
<a href="#wrap">wrap</a>
</li>
<li class="">
<a href="#xTicks">xTicks</a>
</li>
<li class="">
<a href="#yTicks">yTicks</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright &copy; 2007 Yahoo! Inc. All rights reserved.
</div>
</div>
</body>
</html>