oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui/docs/YAHOO.widget.Overlay.html
JT Smith 20f8df1291 upgrading to YUI 2.6 
data tables are going to need some work yet, but the other stuff seems to be working 100%
2008-10-22 23:53:29 +00:00

3607 lines
184 KiB
HTML
Raw Blame History

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>API: container YAHOO.widget.Overlay (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>Container&nbsp; <span class="subtitle">2.6.0</span></h3>
<p>
<a href="./index.html">Yahoo! UI Library</a>
&gt; <a href="./module_container.html">container</a>
&gt; YAHOO.widget.Overlay
</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" /> <label for="showprivate">Show Private</label></span>
<span id="classopts"><input type="checkbox" name="showprotected" id="showprotected" /> <label for="showprotected">Show Protected</label></span>
<span id="classopts"><input type="checkbox" name="showdeprecated" id="showdeprecated" /> <label for="showdeprecated">Show Deprecated</label></span>
</form>
<h2>
Class <b>YAHOO.widget.Overlay</b>
<span class="extends">
- extends <a href="YAHOO.widget.Module.html">YAHOO.widget.Module</a>
</span>
<span class="extends">
</span>
</code>
</h2>
<!-- class tree goes here -->
<dl class="subclasses">
<dt>Known Subclasses:</dd>
<dd>
<a href="YAHOO.widget.Panel.html">YAHOO.widget.Panel</a>
<a href="YAHOO.widget.Menu.html">YAHOO.widget.Menu</a>
<a href="YAHOO.widget.Tooltip.html">YAHOO.widget.Tooltip</a>
</dd>
</dl>
<div class="summary description">
Overlay is a Module that is absolutely positioned above the page flow. It
has convenience methods for positioning and sizing, as well as options for
controlling zIndex and constraining the Overlay's position to the current
visible viewport. Overlay also contains a dynamicly generated IFRAME which
is placed beneath it for Internet Explorer 6 and 5.x so that it will be
properly rendered above SELECT elements.
</div>
<div class="section constructor details">
<h3 id="constructor">Constructor</h3>
<div class="content">
<div class="detail">
<strong>YAHOO.widget.Overlay</strong>
<code>
(
el
,
userConfig
)
</code>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el
&lt;String&gt;
</code>
The element ID representing the Overlay <em>OR</em>
</dd>
<dd>
<code>el
&lt;HTMLElement&gt;
</code>
The element representing the Overlay
</dd>
<dd>
<code>userConfig
&lt;Object&gt;
</code>
The configuration object literal containing
the configuration that should be set for this Overlay. See configuration
documentation for more details.
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="section field details">
<h3 id="properties">Properties</h3>
<div class="content">
<div class="">
<h4><a name="property_CONTEXT_TRIGGERS">CONTEXT_TRIGGERS</a>
<code>- final Array</code>
</h4>
<div class="detail">
<div class="description">
<p>
Array of default event types which will trigger
context alignment for the Overlay class.
</p>
<p>The array is empty by default for Overlay,
but maybe populated in future releases, so classes extending
Overlay which need to define their own set of CONTEXT_TRIGGERS
should concatenate their super class's prototype.CONTEXT_TRIGGERS
value with their own array of values.
</p>
<p>
E.g.:
<code>CustomOverlay.prototype.CONTEXT_TRIGGERS = YAHOO.widget.Overlay.prototype.CONTEXT_TRIGGERS.concat(["windowScroll"]);</code>
</p>
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property_DEFAULT_CONFIG">DEFAULT_CONFIG</a>
<code>- private final Object</code>
</h4>
<div class="detail">
<div class="description">
Constant representing the Overlay's configuration properties
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property_EVENT_TYPES">EVENT_TYPES</a>
<code>- private final Object</code>
</h4>
<div class="detail">
<div class="description">
Constant representing the name of the Overlay's events
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property_YAHOO.widget.Overlay._initialized">YAHOO.widget.Overlay._initialized</a>
<code>- private Boolean</code>
</h4>
<div class="detail">
<div class="description">
A boolean that indicated whether the window resize and scroll events have
already been subscribed to.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property_YAHOO.widget.Overlay._TRIGGER_MAP">YAHOO.widget.Overlay._TRIGGER_MAP</a>
<code>- private static Object</code>
</h4>
<div class="detail">
<div class="description">
Internal map of special event types, which are provided
by the instance. It maps the event type to the custom event
instance. Contains entries for the "windowScroll", "windowResize" and
"textResize" static container events.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_YAHOO.widget.Overlay.BOTTOM_LEFT">YAHOO.widget.Overlay.BOTTOM_LEFT</a>
<code>- static final String</code>
</h4>
<div class="detail">
<div class="description">
Constant representing the top bottom left corner of an element, used for
configuring the context element alignment
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_YAHOO.widget.Overlay.BOTTOM_RIGHT">YAHOO.widget.Overlay.BOTTOM_RIGHT</a>
<code>- static final String</code>
</h4>
<div class="detail">
<div class="description">
Constant representing the bottom right corner of an element, used for
configuring the context element alignment
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_YAHOO.widget.Overlay.CSS_OVERLAY">YAHOO.widget.Overlay.CSS_OVERLAY</a>
<code>- static final String</code>
</h4>
<div class="detail">
<div class="description">
Constant representing the default CSS class used for an Overlay
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_YAHOO.widget.Overlay.IFRAME_SRC">YAHOO.widget.Overlay.IFRAME_SRC</a>
<code>- static final String</code>
</h4>
<div class="detail">
<div class="description">
The URL that will be placed in the iframe
</div>
</div>
<div class="default">
Default Value: 3
</div>
<hr />
</div>
<div class="">
<h4><a name="property_YAHOO.widget.Overlay.STD_MOD_RE">YAHOO.widget.Overlay.STD_MOD_RE</a>
<code>- static final RegExp</code>
</h4>
<div class="detail">
<div class="description">
Constant representing the names of the standard module elements
used in the overlay.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_YAHOO.widget.Overlay.TOP_LEFT">YAHOO.widget.Overlay.TOP_LEFT</a>
<code>- static final String</code>
</h4>
<div class="detail">
<div class="description">
Constant representing the top left corner of an element, used for
configuring the context element alignment
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_YAHOO.widget.Overlay.TOP_RIGHT">YAHOO.widget.Overlay.TOP_RIGHT</a>
<code>- static final String</code>
</h4>
<div class="detail">
<div class="description">
Constant representing the top right corner of an element, used for
configuring the context element alignment
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_YAHOO.widget.Overlay.VIEWPORT_OFFSET">YAHOO.widget.Overlay.VIEWPORT_OFFSET</a>
<code>- static final Number</code>
</h4>
<div class="detail">
<div class="description">
Number representing the minimum distance an Overlay instance should be
positioned relative to the boundaries of the browser's viewport, in pixels.
</div>
</div>
<div class="default">
Default Value: 10
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Properties inherited from <a href="YAHOO.widget.Module.html">YAHOO.widget.Module</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.widget.Module.html#property_body">body</a><span class="">,</span>
<a class=" deprecated" href="YAHOO.widget.Module.html#property_browser">browser</a><span class=" deprecated">,</span>
<a class="" href="YAHOO.widget.Module.html#property_cfg">cfg</a><span class="">,</span>
<a class="" href="YAHOO.widget.Module.html#property_contructor">contructor</a><span class="">,</span>
<a class="private" href="YAHOO.widget.Module.html#property_DEFAULT_CONFIG">DEFAULT_CONFIG</a><span class="private">,</span>
<a class="" href="YAHOO.widget.Module.html#property_element">element</a><span class="">,</span>
<a class="private" href="YAHOO.widget.Module.html#property_EVENT_TYPES">EVENT_TYPES</a><span class="private">,</span>
<a class="" href="YAHOO.widget.Module.html#property_footer">footer</a><span class="">,</span>
<a class="" href="YAHOO.widget.Module.html#property_header">header</a><span class="">,</span>
<a class="" href="YAHOO.widget.Module.html#property_id">id</a><span class="">,</span>
<a class=" deprecated" href="YAHOO.widget.Module.html#property_imageRoot">imageRoot</a><span class=" deprecated">,</span>
<a class="" href="YAHOO.widget.Module.html#property_isSecure">isSecure</a><span class="">,</span>
<a class="" href="YAHOO.widget.Module.html#property_platform">platform</a>
</code>
</div>
</div>
<div class="section method details">
<h3 id="methods">Methods</h3>
<div class="content">
<div class="protected">
<h4>
<a name="method__alignOnTrigger">_alignOnTrigger</a></h4>
<div class="detail">
<code>
protected
void
<strong>_alignOnTrigger</strong>
(
type
,
args
)
</code>
<div class="description">
Custom Event handler for context alignment triggers. Invokes the align method
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The event type (not used by the default implementation)
</dd>
<dd>
<code>args &lt;Any[]&gt;</code>
The array of arguments for the trigger event (not used by the default implementation)
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__autoFillOnHeightChange">_autoFillOnHeightChange</a></h4>
<div class="detail">
<code>
protected
void
<strong>_autoFillOnHeightChange</strong>
(
type
,
args
,
el
)
</code>
<div class="description">
The default custom event handler executed when the overlay's height is changed,
if the autofillheight property has been set.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The event type
</dd>
<dd>
<code>args &lt;Array&gt;</code>
The array of arguments passed to event subscribers
</dd>
<dd>
<code>el &lt;HTMLElement&gt;</code>
The header, body or footer element which is to be resized to fill
out the containers height
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__findTriggerCE">_findTriggerCE</a></h4>
<div class="detail">
<code>
private
void
<strong>_findTriggerCE</strong>
(
t
)
</code>
<div class="description">
Helper method to locate the custom event instance for the event name string
passed in. As a convenience measure, any custom events passed in are returned.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>t &lt;String|CustomEvent&gt;</code>
Either a CustomEvent, or event type (e.g. "windowScroll") for which a
custom event instance needs to be looked up from the Overlay._TRIGGER_MAP.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__getComputedHeight">_getComputedHeight</a></h4>
<div class="detail">
<code>
private
Number
<strong>_getComputedHeight</strong>
(
el
)
</code>
<div class="description">
Determines the content box height of the given element (height of the element, without padding or borders) in pixels.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el &lt;HTMLElement&gt;</code>
The element for which the content height needs to be determined
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The content box height of the given element, or null if it could not be determined.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__getPreciseHeight">_getPreciseHeight</a></h4>
<div class="detail">
<code>
private
Float
<strong>_getPreciseHeight</strong>
(
el
)
</code>
<div class="description">
Returns the sub-pixel height of the el, using getBoundingClientRect, if available,
otherwise returns the offsetHeight
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el &lt;HTMLElement&gt;</code>
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Float
</code></dt>
<dd>The sub-pixel height if supported by the browser, else the rounded height.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__primeXYFromDOM">_primeXYFromDOM</a></h4>
<div class="detail">
<code>
protected
void
<strong>_primeXYFromDOM</strong>
(
)
</code>
<div class="description">
Set's the container's XY value from DOM if not already set.
Differs from syncPosition, in that the XY value is only sync'd with DOM if
not already set. The method also refire's the XY config property event, so any
beforeMove, Move event listeners are invoked.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__processTriggers">_processTriggers</a></h4>
<div class="detail">
<code>
protected
void
<strong>_processTriggers</strong>
(
triggers
,
mode
,
fn
)
</code>
<div class="description">
Utility method that subscribes or unsubscribes the given
function from the list of trigger events provided.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>triggers &lt;Array[String|CustomEvent]&gt;</code>
An array of either CustomEvents, event type strings
(e.g. "beforeShow", "windowScroll") to/from which the provided function should be
subscribed/unsubscribed respectively.
</dd>
<dd>
<code>mode &lt;String&gt;</code>
Either "subscribe" or "unsubscribe", specifying whether or not
we are subscribing or unsubscribing trigger listeners
</dd>
<dd>
<code>fn &lt;Function&gt;</code>
The function to be subscribed/unsubscribed to/from the trigger event.
Context is always set to the overlay instance, and no additional object argument
get passed to the subscribed function.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__validateAutoFillHeight">_validateAutoFillHeight</a></h4>
<div class="detail">
<code>
protected
<strong>_validateAutoFillHeight</strong>
(
val
)
</code>
<div class="description">
autofillheight validator. Verifies that the autofill value is either null
or one of the strings : "body", "header" or "footer".
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;String&gt;</code>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_align">align</a></h4>
<div class="detail">
<code>
void
<strong>align</strong>
(
elementAlign
,
contextAlign
)
</code>
<div class="description">
Aligns the Overlay to its context element using the specified corner
points (represented by the constants TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT,
and BOTTOM_RIGHT.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>elementAlign &lt;String&gt;</code>
The String representing the corner of
the Overlay that should be aligned to the context element
</dd>
<dd>
<code>contextAlign &lt;String&gt;</code>
The corner of the context element
that the elementAlign corner should stick to.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_bringToTop">bringToTop</a></h4>
<div class="detail">
<code>
void
<strong>bringToTop</strong>
(
)
</code>
<div class="description">
Places the Overlay on top of all other instances of
YAHOO.widget.Overlay.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_center">center</a></h4>
<div class="detail">
<code>
void
<strong>center</strong>
(
)
</code>
<div class="description">
Centers the container in the viewport.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configAutoFillHeight">configAutoFillHeight</a></h4>
<div class="detail">
<code>
void
<strong>configAutoFillHeight</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "autofillheight" property is changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configConstrainToViewport">configConstrainToViewport</a></h4>
<div class="detail">
<code>
void
<strong>configConstrainToViewport</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "constraintoviewport"
property is changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for
the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configContext">configContext</a></h4>
<div class="detail">
<code>
void
<strong>configContext</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "context" property
is changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configFixedCenter">configFixedCenter</a></h4>
<div class="detail">
<code>
void
<strong>configFixedCenter</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "fixedcenter" property
is changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configHeight">configHeight</a></h4>
<div class="detail">
<code>
void
<strong>configHeight</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "height" property is changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configIframe">configIframe</a></h4>
<div class="detail">
<code>
void
<strong>configIframe</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "iframe" property is changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configVisible">configVisible</a></h4>
<div class="detail">
<code>
void
<strong>configVisible</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "visible" property is
changed. This method is responsible for firing showEvent
and hideEvent.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configWidth">configWidth</a></h4>
<div class="detail">
<code>
void
<strong>configWidth</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "width" property is changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configX">configX</a></h4>
<div class="detail">
<code>
void
<strong>configX</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "x" property is changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configXY">configXY</a></h4>
<div class="detail">
<code>
void
<strong>configXY</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "xy" property is changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configY">configY</a></h4>
<div class="detail">
<code>
void
<strong>configY</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "y" property is changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_configzIndex">configzIndex</a></h4>
<div class="detail">
<code>
void
<strong>configzIndex</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler fired when the "zIndex" property is changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_destroy">destroy</a></h4>
<div class="detail">
<code>
void
<strong>destroy</strong>
(
)
</code>
<div class="description">
Removes the Overlay element from the DOM and sets all child
elements to null.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_doCenterOnDOMEvent">doCenterOnDOMEvent</a></h4>
<div class="detail">
<code>
void
<strong>doCenterOnDOMEvent</strong>
(
)
</code>
<div class="description">
Center event handler used for centering on scroll/resize, but only if
the Overlay is visible
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_enforceConstraints">enforceConstraints</a></h4>
<div class="detail">
<code>
void
<strong>enforceConstraints</strong>
(
type
,
args
,
obj
)
</code>
<div class="description">
The default event handler executed when the moveEvent is fired, if the
"constraintoviewport" is set to true.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>type &lt;String&gt;</code>
The CustomEvent type (usually the property name)
</dd>
<dd>
<code>args &lt;Object[]&gt;</code>
The CustomEvent arguments. For configuration
handlers, args[0] will equal the newly applied value for the property.
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object. For configuration handlers,
this will usually equal the owner.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_fillHeight">fillHeight</a></h4>
<div class="detail">
<code>
void
<strong>fillHeight</strong>
(
el
)
</code>
<div class="description">
<p>
Sets the height on the provided header, body or footer element to
fill out the height of the container. It determines the height of the
containers content box, based on it's configured height value, and
sets the height of the autofillheight element to fill out any
space remaining after the other standard module element heights
have been accounted for.
</p>
<p><strong>NOTE:</strong> This method is not designed to work if an explicit
height has not been set on the container, since for an "auto" height container,
the heights of the header/body/footer will drive the height of the container.</p>
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el &lt;HTMLElement&gt;</code>
The element which should be resized to fill out the height
of the container element.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getConstrainedX">getConstrainedX</a></h4>
<div class="detail">
<code>
Number
<strong>getConstrainedX</strong>
(
x
)
</code>
<div class="description">
Given x coordinate value, returns the calculated x coordinate required to
position the Overlay if it is to be constrained to the viewport, based on the
current element size, viewport dimensions and scroll values.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>x &lt;Number&gt;</code>
The X coordinate value to be constrained
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The constrained x coordinate</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getConstrainedXY">getConstrainedXY</a></h4>
<div class="detail">
<code>
Array
<strong>getConstrainedXY</strong>
(
x
,
y
)
</code>
<div class="description">
Given x, y coordinate values, returns the calculated coordinates required to
position the Overlay if it is to be constrained to the viewport, based on the
current element size, viewport dimensions and scroll values.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>x &lt;Number&gt;</code>
The X coordinate value to be constrained
</dd>
<dd>
<code>y &lt;Number&gt;</code>
The Y coordinate value to be constrained
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Array
</code></dt>
<dd>The constrained x and y coordinates at index 0 and 1 respectively;</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getConstrainedY">getConstrainedY</a></h4>
<div class="detail">
<code>
Number
<strong>getConstrainedY</strong>
(
y
)
</code>
<div class="description">
Given y coordinate value, returns the calculated y coordinate required to
position the Overlay if it is to be constrained to the viewport, based on the
current element size, viewport dimensions and scroll values.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>y &lt;Number&gt;</code>
The Y coordinate value to be constrained
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The constrained y coordinate</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_hideIframe">hideIframe</a></h4>
<div class="detail">
<code>
void
<strong>hideIframe</strong>
(
)
</code>
<div class="description">
Hides the iframe shim, if it has been enabled.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_hideMacGeckoScrollbars">hideMacGeckoScrollbars</a></h4>
<div class="detail">
<code>
void
<strong>hideMacGeckoScrollbars</strong>
(
)
</code>
<div class="description">
Adds a CSS class ("hide-scrollbars") and removes a CSS class
("show-scrollbars") to the Overlay to fix a bug in Gecko on Mac OS X
(https://bugzilla.mozilla.org/show_bug.cgi?id=187435)
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_init">init</a></h4>
<div class="detail">
<code>
void
<strong>init</strong>
(
el
,
userConfig
)
</code>
<div class="description">
The Overlay initialization method, which is executed for Overlay and
all of its subclasses. This method is automatically called by the
constructor, and sets up all DOM references for pre-existing markup,
and creates required markup if it is not already present.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el &lt;String&gt;</code>
The element ID representing the Overlay <em>OR</em>
</dd>
<dd>
<code>el &lt;HTMLElement&gt;</code>
The element representing the Overlay
</dd>
<dd>
<code>userConfig &lt;Object&gt;</code>
The configuration object literal
containing the configuration that should be set for this Overlay.
See configuration documentation for more details.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_initDefaultConfig">initDefaultConfig</a></h4>
<div class="detail">
<code>
void
<strong>initDefaultConfig</strong>
(
)
</code>
<div class="description">
Initializes the class's configurable properties which can be changed
using the Overlay's Config object (cfg).
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_initEvents">initEvents</a></h4>
<div class="detail">
<code>
void
<strong>initEvents</strong>
(
)
</code>
<div class="description">
Initializes the custom events for Overlay which are fired
automatically at appropriate times by the Overlay class.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_moveTo">moveTo</a></h4>
<div class="detail">
<code>
void
<strong>moveTo</strong>
(
x
,
y
)
</code>
<div class="description">
Moves the Overlay to the specified position. This function is
identical to calling this.cfg.setProperty("xy", [x,y]);
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>x &lt;Number&gt;</code>
The Overlay's new x position
</dd>
<dd>
<code>y &lt;Number&gt;</code>
The Overlay's new y position
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_onDomResize">onDomResize</a></h4>
<div class="detail">
<code>
void
<strong>onDomResize</strong>
(
e
,
obj
)
</code>
<div class="description">
Event handler fired when the resize monitor element is resized.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>e &lt;DOMEvent&gt;</code>
The resize DOM event
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The scope object
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_showIframe">showIframe</a></h4>
<div class="detail">
<code>
void
<strong>showIframe</strong>
(
)
</code>
<div class="description">
Shows the iframe shim, if it has been enabled.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_showMacGeckoScrollbars">showMacGeckoScrollbars</a></h4>
<div class="detail">
<code>
void
<strong>showMacGeckoScrollbars</strong>
(
)
</code>
<div class="description">
Adds a CSS class ("show-scrollbars") and removes a CSS class
("hide-scrollbars") to the Overlay to fix a bug in Gecko on Mac OS X
(https://bugzilla.mozilla.org/show_bug.cgi?id=187435)
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_stackIframe">stackIframe</a></h4>
<div class="detail">
<code>
void
<strong>stackIframe</strong>
(
)
</code>
<div class="description">
Sets the zindex of the iframe shim, if it exists, based on the zindex of
the Overlay element. The zindex of the iframe is set to be one less
than the Overlay element's zindex.
<p>NOTE: This method will not bump up the zindex of the Overlay element
to ensure that the iframe shim has a non-negative zindex.
If you require the iframe zindex to be 0 or higher, the zindex of
the Overlay element should be set to a value greater than 0, before
this method is called.
</p>
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_syncIframe">syncIframe</a></h4>
<div class="detail">
<code>
void
<strong>syncIframe</strong>
(
)
</code>
<div class="description">
Syncronizes the size and position of iframe shim to that of its
corresponding Overlay instance.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_syncPosition">syncPosition</a></h4>
<div class="detail">
<code>
void
<strong>syncPosition</strong>
(
)
</code>
<div class="description">
Synchronizes the Panel's "xy", "x", and "y" properties with the
Panel's position in the DOM. This is primarily used to update
position information during drag & drop.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_toString">toString</a></h4>
<div class="detail">
<code>
String
<strong>toString</strong>
(
)
</code>
<div class="description">
Returns a String representation of the object.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
String
</code></dt>
<dd>The string representation of the Overlay.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_YAHOO.widget.Overlay.windowResizeHandler">YAHOO.widget.Overlay.windowResizeHandler</a></h4>
<div class="detail">
<code>
static
void
<strong>YAHOO.widget.Overlay.windowResizeHandler</strong>
(
e
)
</code>
<div class="description">
The DOM event handler used to fire the CustomEvent for window resize
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>e &lt;DOMEvent&gt;</code>
The DOM resize event
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_YAHOO.widget.Overlay.windowScrollHandler">YAHOO.widget.Overlay.windowScrollHandler</a></h4>
<div class="detail">
<code>
static
void
<strong>YAHOO.widget.Overlay.windowScrollHandler</strong>
(
e
)
</code>
<div class="description">
The DOM event handler used to fire the CustomEvent for window scroll
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>e &lt;DOMEvent&gt;</code>
The DOM scroll event
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Methods inherited from <a href="YAHOO.widget.Module.html">YAHOO.widget.Module</a>:</h4>
<div class="content">
<code>
<a class="protected" href="YAHOO.widget.Module.html#method__addToParent">_addToParent</a><span class="protected">,</span> <a class="protected" href="YAHOO.widget.Module.html#method__initResizeMonitor">_initResizeMonitor</a><span class="protected">,</span> <a class="private" href="YAHOO.widget.Module.html#method__supportsCWResize">_supportsCWResize</a><span class="private">,</span> <a class="" href="YAHOO.widget.Module.html#method_appendToBody">appendToBody</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_appendToFooter">appendToFooter</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_appendToHeader">appendToHeader</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_configMonitorResize">configMonitorResize</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_configVisible">configVisible</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_destroy">destroy</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_hide">hide</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_init">init</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_initDefaultConfig">initDefaultConfig</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_initEvents">initEvents</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_initResizeMonitor">initResizeMonitor</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_onDomResize">onDomResize</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_render">render</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_setBody">setBody</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_setFooter">setFooter</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_setHeader">setHeader</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_show">show</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#method_toString">toString</a>
</code>
</div>
</div>
<div class="section method details">
<h3 id="events">Events</h3>
<div class="content">
<div class="">
<h4>
<a name="event_beforeMoveEvent">beforeMoveEvent</a></h4>
<div class="detail">
<code>
<strong>beforeMoveEvent</strong>
(
x
,
y
)
</code>
<div class="description">
CustomEvent fired before the Overlay is moved.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>x &lt;Number&gt;</code>
x coordinate
</dd>
<dd>
<code>y &lt;Number&gt;</code>
y coordinate
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_moveEvent">moveEvent</a></h4>
<div class="detail">
<code>
<strong>moveEvent</strong>
(
x
,
y
)
</code>
<div class="description">
CustomEvent fired after the Overlay is moved.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>x &lt;Number&gt;</code>
x coordinate
</dd>
<dd>
<code>y &lt;Number&gt;</code>
y coordinate
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_YAHOO.widget.Overlay.windowResizeEvent">YAHOO.widget.Overlay.windowResizeEvent</a></h4>
<div class="detail">
<code>
<strong>YAHOO.widget.Overlay.windowResizeEvent</strong>
(
)
</code>
<div class="description">
A singleton CustomEvent used for reacting to the DOM event for
window resize
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_YAHOO.widget.Overlay.windowScrollEvent">YAHOO.widget.Overlay.windowScrollEvent</a></h4>
<div class="detail">
<code>
<strong>YAHOO.widget.Overlay.windowScrollEvent</strong>
(
)
</code>
<div class="description">
A singleton CustomEvent used for reacting to the DOM event for
window scroll
</div>
<div class="description">
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Events inherited from <a href="YAHOO.widget.Module.html">YAHOO.widget.Module</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.widget.Module.html#event_appendEvent">appendEvent</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#event_beforeHideEvent">beforeHideEvent</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#event_beforeInitEvent">beforeInitEvent</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#event_beforeRenderEvent">beforeRenderEvent</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#event_beforeShowEvent">beforeShowEvent</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#event_changeBodyEvent">changeBodyEvent</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#event_changeContentEvent">changeContentEvent</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#event_changeFooterEvent">changeFooterEvent</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#event_changeHeaderEvent">changeHeaderEvent</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#event_destroyEvent">destroyEvent</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#event_hideEvent">hideEvent</a> <a class="" href="YAHOO.widget.Module.html#event_initEvent">initEvent</a> <a class="" href="YAHOO.widget.Module.html#event_renderEvent">renderEvent</a> <a class="" href="YAHOO.widget.Module.html#event_showEvent">showEvent</a> <a class="" href="YAHOO.widget.Module.html#event_YAHOO.widget.Module.textResizeEvent">YAHOO.widget.Module.textResizeEvent</a>
</code>
</div>
</div>
<div class="section field details">
<h3 id="configattributes">Configuration Attributes</h3>
<div class="content">
<div class="">
<h4><a name="config_autofillheight">autofillheight</a>
<code>- String</code>
</h4>
<div class="detail">
<div class="description">
Standard module element which should auto fill out the height of the Overlay if the height config property is set.
Supported values are "header", "body", "footer".
</div>
</div>
<div class="default">
Default Value: null
</div>
<hr />
</div>
<div class="">
<h4><a name="config_constraintoviewport">constraintoviewport</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
True if the Overlay should be prevented from being positioned
out of the viewport.
</div>
</div>
<div class="default">
Default Value: false
</div>
<hr />
</div>
<div class="">
<h4><a name="config_context">context</a>
<code>- Array</code>
</h4>
<div class="detail">
<div class="description">
<p>
The array of context arguments for context-sensitive positioning.
</p>
<p>
The format of the array is: <code>[contextElementOrId, overlayCorner, contextCorner, arrayOfTriggerEvents (optional)]</code>, the
the 4 array elements described in detail below:
</p>
<dl>
<dt>contextElementOrId &#60;String|HTMLElement&#62;</dt>
<dd>A reference to the context element to which the overlay should be aligned (or it's id).</dd>
<dt>overlayCorner &#60;String&#62;</dt>
<dd>The corner of the overlay which is to be used for alignment. This corner will be aligned to the
corner of the context element defined by the "contextCorner" entry which follows. Supported string values are:
"tr" (top right), "tl" (top left), "br" (bottom right), or "bl" (bottom left).</dd>
<dt>contextCorner &#60;String&#62;</dt>
<dd>The corner of the context element which is to be used for alignment. Supported string values are the same ones listed for the "overlayCorner" entry above.</dd>
<dt>arrayOfTriggerEvents (optional) &#60;Array[String|CustomEvent]&#62;</dt>
<dd>
<p>
By default, context alignment is a one time operation, aligning the Overlay to the context element when context configuration property is set, or when the <a href="#method_align">align</a>
method is invoked. However, you can use the optional "arrayOfTriggerEvents" entry to define the list of events which should force the overlay to re-align itself with the context element.
This is useful in situations where the layout of the document may change, resulting in the context element's position being modified.
</p>
<p>
The array can contain either event type strings for events the instance publishes (e.g. "beforeShow") or CustomEvent instances. Additionally the following
3 static container event types are also currently supported : <code>"windowResize", "windowScroll", "textResize"</code> (defined in <a href="#property__TRIGGER_MAP">_TRIGGER_MAP</a> private property).
</p>
</dd>
</dl>
<p>
For example, setting this property to <code>["img1", "tl", "bl"]</code> will
align the Overlay's top left corner to the bottom left corner of the
context element with id "img1".
</p>
<p>
Adding the optional trigger values: <code>["img1", "tl", "bl", ["beforeShow", "windowResize"]]</code>,
will re-align the overlay position, whenever the "beforeShow" or "windowResize" events are fired.
</p>
</div>
</div>
<div class="default">
Default Value: null
</div>
<hr />
</div>
<div class="">
<h4><a name="config_fixedcenter">fixedcenter</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
True if the Overlay should be anchored to the center of
the viewport.
</div>
</div>
<div class="default">
Default Value: false
</div>
<hr />
</div>
<div class="">
<h4><a name="config_height">height</a>
<code>- String</code>
</h4>
<div class="detail">
<div class="description">
CSS height of the Overlay.
</div>
</div>
<div class="default">
Default Value: null
</div>
<hr />
</div>
<div class="">
<h4><a name="config_iframe">iframe</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Boolean indicating whether or not the Overlay should
have an IFRAME shim; used to prevent SELECT elements from
poking through an Overlay instance in IE6. When set to "true",
the iframe shim is created when the Overlay instance is intially
made visible.
</div>
</div>
<div class="default">
Default Value: true for IE6 and below, false for all other browsers.
</div>
<hr />
</div>
<div class="">
<h4><a name="config_preventcontextoverlap">preventcontextoverlap</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Boolean indicating whether or not the Overlay should overlap its
context element (defined using the "context" configuration property) when the
"constraintoviewport" configuration property is set to "true".
</div>
</div>
<div class="default">
Default Value: false
</div>
<hr />
</div>
<div class="">
<h4><a name="config_width">width</a>
<code>- String</code>
</h4>
<div class="detail">
<div class="description">
CSS width of the Overlay.
</div>
</div>
<div class="default">
Default Value: null
</div>
<hr />
</div>
<div class="">
<h4><a name="config_x">x</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The absolute x-coordinate position of the Overlay
</div>
</div>
<div class="default">
Default Value: null
</div>
<hr />
</div>
<div class="">
<h4><a name="config_xy">xy</a>
<code>- Number[]</code>
</h4>
<div class="detail">
<div class="description">
An array with the absolute x and y positions of the Overlay
</div>
</div>
<div class="default">
Default Value: null
</div>
<hr />
</div>
<div class="">
<h4><a name="config_y">y</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The absolute y-coordinate position of the Overlay
</div>
</div>
<div class="default">
Default Value: null
</div>
<hr />
</div>
<div class="">
<h4><a name="config_zIndex">zIndex</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
CSS z-index of the Overlay.
</div>
</div>
<div class="default">
Default Value: null
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Configuration attributes inherited from <a href="YAHOO.widget.Module.html">YAHOO.widget.Module</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.widget.Module.html#config_appendtodocumentbody">appendtodocumentbody</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#config_effect">effect</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#config_monitorresize">monitorresize</a><span class="">,</span> <a class="" href="YAHOO.widget.Module.html#config_visible">visible</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_carousel.html">carousel</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="selected"><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_paginator.html">paginator</a></li>
<li class=""><a href="module_profiler.html">profiler</a></li>
<li class=""><a href="module_profilerviewer.html">profilerviewer</a></li>
<li class=""><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=""><a href="YAHOO.util.Config.html">YAHOO.util.Config</a></li>
<li class=""><a href="YAHOO.widget.ContainerEffect.html">YAHOO.widget.ContainerEffect</a></li>
<li class=""><a href="YAHOO.widget.Dialog.html">YAHOO.widget.Dialog</a></li>
<li class=""><a href="YAHOO.widget.Module.html">YAHOO.widget.Module</a></li>
<li class="selected"><a href="YAHOO.widget.Overlay.html">YAHOO.widget.Overlay</a></li>
<li class=""><a href="YAHOO.widget.OverlayManager.html">YAHOO.widget.OverlayManager</a></li>
<li class=""><a href="YAHOO.widget.Panel.html">YAHOO.widget.Panel</a></li>
<li class=""><a href="YAHOO.widget.SimpleDialog.html">YAHOO.widget.SimpleDialog</a></li>
<li class=""><a href="YAHOO.widget.Tooltip.html">YAHOO.widget.Tooltip</a></li>
</ul>
</div>
<div class="module">
<h4>Files</h4>
<ul class="content">
<li class=""><a href="Config.js.html">Config.js</a></li>
<li class=""><a href="ContainerEffect.js.html">ContainerEffect.js</a></li>
<li class=""><a href="Dialog.js.html">Dialog.js</a></li>
<li class=""><a href="Module.js.html">Module.js</a></li>
<li class=""><a href="Overlay.js.html">Overlay.js</a></li>
<li class=""><a href="OverlayManager.js.html">OverlayManager.js</a></li>
<li class=""><a href="Panel.js.html">Panel.js</a></li>
<li class=""><a href="SimpleDialog.js.html">SimpleDialog.js</a></li>
<li class=""><a href="Tooltip.js.html">Tooltip.js</a></li>
</ul>
</div>
<div class="module">
<h4>Properties</h4>
<ul class="content">
<li class=""><a href="#property_CONTEXT_TRIGGERS">CONTEXT_TRIGGERS</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class="private"><a href="#property_DEFAULT_CONFIG">DEFAULT_CONFIG</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class="private"><a href="#property_EVENT_TYPES">EVENT_TYPES</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class="private"><a href="#property_YAHOO.widget.Overlay._initialized">YAHOO.widget.Overlay._initialized</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class="private"><a href="#property_YAHOO.widget.Overlay._TRIGGER_MAP">YAHOO.widget.Overlay._TRIGGER_MAP</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class=""><a href="#property_YAHOO.widget.Overlay.BOTTOM_LEFT">YAHOO.widget.Overlay.BOTTOM_LEFT</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class=""><a href="#property_YAHOO.widget.Overlay.BOTTOM_RIGHT">YAHOO.widget.Overlay.BOTTOM_RIGHT</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class=""><a href="#property_YAHOO.widget.Overlay.CSS_OVERLAY">YAHOO.widget.Overlay.CSS_OVERLAY</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class=""><a href="#property_YAHOO.widget.Overlay.IFRAME_SRC">YAHOO.widget.Overlay.IFRAME_SRC</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class=""><a href="#property_YAHOO.widget.Overlay.STD_MOD_RE">YAHOO.widget.Overlay.STD_MOD_RE</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class=""><a href="#property_YAHOO.widget.Overlay.TOP_LEFT">YAHOO.widget.Overlay.TOP_LEFT</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class=""><a href="#property_YAHOO.widget.Overlay.TOP_RIGHT">YAHOO.widget.Overlay.TOP_RIGHT</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
<li class=""><a href="#property_YAHOO.widget.Overlay.VIEWPORT_OFFSET">YAHOO.widget.Overlay.VIEWPORT_OFFSET</a>
<!--<code>&lt;Number&gt;</code>-->
</li>
</ul>
</div>
<div class="module">
<h4>Methods</h4>
<ul class="content">
<li class="protected"><!--<code>void</code>-->
<a href="#method__alignOnTrigger">_alignOnTrigger</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__autoFillOnHeightChange">_autoFillOnHeightChange</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__findTriggerCE">_findTriggerCE</a>
</li>
<li class="private"><!--<code>Number</code>-->
<a href="#method__getComputedHeight">_getComputedHeight</a>
</li>
<li class="private"><!--<code>Float</code>-->
<a href="#method__getPreciseHeight">_getPreciseHeight</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__primeXYFromDOM">_primeXYFromDOM</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__processTriggers">_processTriggers</a>
</li>
<li class="protected"><!--<code></code>-->
<a href="#method__validateAutoFillHeight">_validateAutoFillHeight</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_align">align</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_bringToTop">bringToTop</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_center">center</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configAutoFillHeight">configAutoFillHeight</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configConstrainToViewport">configConstrainToViewport</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configContext">configContext</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configFixedCenter">configFixedCenter</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configHeight">configHeight</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configIframe">configIframe</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configVisible">configVisible</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configWidth">configWidth</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configX">configX</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configXY">configXY</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configY">configY</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_configzIndex">configzIndex</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_destroy">destroy</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_doCenterOnDOMEvent">doCenterOnDOMEvent</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_enforceConstraints">enforceConstraints</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_fillHeight">fillHeight</a>
</li>
<li class=""><!--<code>Number</code>-->
<a href="#method_getConstrainedX">getConstrainedX</a>
</li>
<li class=""><!--<code>Array</code>-->
<a href="#method_getConstrainedXY">getConstrainedXY</a>
</li>
<li class=""><!--<code>Number</code>-->
<a href="#method_getConstrainedY">getConstrainedY</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_hideIframe">hideIframe</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_hideMacGeckoScrollbars">hideMacGeckoScrollbars</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_init">init</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_initDefaultConfig">initDefaultConfig</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_initEvents">initEvents</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_moveTo">moveTo</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_onDomResize">onDomResize</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_showIframe">showIframe</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_showMacGeckoScrollbars">showMacGeckoScrollbars</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_stackIframe">stackIframe</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_syncIframe">syncIframe</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_syncPosition">syncPosition</a>
</li>
<li class=""><!--<code>String</code>-->
<a href="#method_toString">toString</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_YAHOO.widget.Overlay.windowResizeHandler">YAHOO.widget.Overlay.windowResizeHandler</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_YAHOO.widget.Overlay.windowScrollHandler">YAHOO.widget.Overlay.windowScrollHandler</a>
</li>
</ul>
</div>
<div class="module">
<h4>Events</h4>
<ul class="content">
<li class="">
<a href="#event_beforeMoveEvent">beforeMoveEvent</a>
</li>
<li class="">
<a href="#event_moveEvent">moveEvent</a>
</li>
<li class="">
<a href="#event_YAHOO.widget.Overlay.windowResizeEvent">YAHOO.widget.Overlay.windowResizeEvent</a>
</li>
<li class="">
<a href="#event_YAHOO.widget.Overlay.windowScrollEvent">YAHOO.widget.Overlay.windowScrollEvent</a>
</li>
</ul>
</div>
<div class="module">
<h4>Configuration Attributes</h4>
<ul class="content">
<li class="">
<a href="#config_autofillheight">autofillheight</a>
</li>
<li class="">
<a href="#config_constraintoviewport">constraintoviewport</a>
</li>
<li class="">
<a href="#config_context">context</a>
</li>
<li class="">
<a href="#config_fixedcenter">fixedcenter</a>
</li>
<li class="">
<a href="#config_height">height</a>
</li>
<li class="">
<a href="#config_iframe">iframe</a>
</li>
<li class="">
<a href="#config_preventcontextoverlap">preventcontextoverlap</a>
</li>
<li class="">
<a href="#config_width">width</a>
</li>
<li class="">
<a href="#config_x">x</a>
</li>
<li class="">
<a href="#config_xy">xy</a>
</li>
<li class="">
<a href="#config_y">y</a>
</li>
<li class="">
<a href="#config_zIndex">zIndex</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright &copy; 2008 Yahoo! Inc. All rights reserved.
</div>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink