# Yahoo! UI Library

### Container 2.7.0

Yahoo! UI Library > container > YAHOO.widget.Overlay
Search:
Filters Show Private Show Protected Show Deprecated

## Class YAHOO.widget.Overlay - extends YAHOO.widget.Module

Known Subclasses:
  YAHOO.widget.Panel YAHOO.widget.Menu YAHOO.widget.Tooltip

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.

### Constructor

YAHOO.widget.Overlay `( el , userConfig )`

Parameters:
  `el <String>` The element ID representing the Overlay OR
  `el <HTMLElement>` The element representing the Overlay
  `userConfig <Object>` The configuration object literal containing the configuration that should be set for this Overlay. See configuration documentation for more details.

### Properties

#### CONTEXT_TRIGGERS - `final Array`

Array of default event types which will trigger context alignment for the Overlay class.

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.

E.g.: `CustomOverlay.prototype.CONTEXT_TRIGGERS = YAHOO.widget.Overlay.prototype.CONTEXT_TRIGGERS.concat(["windowScroll"]);`

#### DEFAULT_CONFIG - `private final Object`

Constant representing the Overlay's configuration properties

#### EVENT_TYPES - `private final Object`

Constant representing the name of the Overlay's events

#### YAHOO.widget.Overlay._initialized - `private Boolean`

A boolean that indicated whether the window resize and scroll events have already been subscribed to.

#### YAHOO.widget.Overlay._TRIGGER_MAP - `private static Object`

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.

#### YAHOO.widget.Overlay.BOTTOM_LEFT - `static final String`

Constant representing the top bottom left corner of an element, used for configuring the context element alignment

#### YAHOO.widget.Overlay.BOTTOM_RIGHT - `static final String`

Constant representing the bottom right corner of an element, used for configuring the context element alignment

#### YAHOO.widget.Overlay.CSS_OVERLAY - `static final String`

Constant representing the default CSS class used for an Overlay

#### YAHOO.widget.Overlay.IFRAME_SRC - `static final String`

The URL that will be placed in the iframe
Default Value: 3

#### YAHOO.widget.Overlay.STD_MOD_RE - `static final RegExp`

Constant representing the names of the standard module elements used in the overlay.

#### YAHOO.widget.Overlay.TOP_LEFT - `static final String`

Constant representing the top left corner of an element, used for configuring the context element alignment

#### YAHOO.widget.Overlay.TOP_RIGHT - `static final String`

Constant representing the top right corner of an element, used for configuring the context element alignment

#### YAHOO.widget.Overlay.VIEWPORT_OFFSET - `static final Number`

Number representing the minimum distance an Overlay instance should be positioned relative to the boundaries of the browser's viewport, in pixels.
Default Value: 10

#### Properties inherited from YAHOO.widget.Module:

`body, browser, cfg, contructor, DEFAULT_CONFIG, element, EVENT_TYPES, footer, header, id, imageRoot, isSecure, platform`

### Methods

#### _alignOnTrigger

`protected void _alignOnTrigger ( type , args )`
Custom Event handler for context alignment triggers. Invokes the align method

Parameters:
  `type <String>` The event type (not used by the default implementation)
  `args <Any[]>` The array of arguments for the trigger event (not used by the default implementation)

Returns: `void`

#### _autoFillOnHeightChange

`protected void _autoFillOnHeightChange ( type , args , el )`
The default custom event handler executed when the overlay's height is changed, if the autofillheight property has been set.

Parameters:
  `type <String>` The event type
  `args <Array>` The array of arguments passed to event subscribers
  `el <HTMLElement>` The header, body or footer element which is to be resized to fill out the containers height

Returns: `void`

#### _findTriggerCE

`private void _findTriggerCE ( t )`
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.

Parameters:
  `t <String|CustomEvent>` 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.

Returns: `void`

#### _getComputedHeight

`private Number _getComputedHeight ( el )`
Determines the content box height of the given element (height of the element, without padding or borders) in pixels.

Parameters:
  `el <HTMLElement>` The element for which the content height needs to be determined

Returns: `Number`
  The content box height of the given element, or null if it could not be determined.

#### _getPreciseHeight

`private Float _getPreciseHeight ( el )`
Returns the sub-pixel height of the el, using getBoundingClientRect, if available, otherwise returns the offsetHeight

Parameters:
  `el <HTMLElement>`

Returns: `Float`
  The sub-pixel height if supported by the browser, else the rounded height.

#### _primeXYFromDOM

`protected void _primeXYFromDOM ( )`
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.

Returns: `void`

#### _processTriggers

`protected void _processTriggers ( triggers , mode , fn )`
Utility method that subscribes or unsubscribes the given function from the list of trigger events provided.

Parameters:
  `triggers <Array[String|CustomEvent]>` An array of either CustomEvents, event type strings (e.g. "beforeShow", "windowScroll") to/from which the provided function should be subscribed/unsubscribed respectively.
  `mode <String>` Either "subscribe" or "unsubscribe", specifying whether or not we are subscribing or unsubscribing trigger listeners
  `fn <Function>` 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.

Returns: `void`

#### _setDomVisibility

`protected void _setDomVisibility ( visible )`
Internal implementation to set the visibility of the overlay in the DOM.

Parameters:
  `visible <boolean>` Whether to show or hide the Overlay's outer element

Returns: `void`

#### _validateAutoFillHeight

`protected _validateAutoFillHeight ( val )`
autofillheight validator. Verifies that the autofill value is either null or one of the strings : "body", "header" or "footer".

Parameters:
  `val <String>`

#### align

`void align ( elementAlign , contextAlign )`
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.

Parameters:
  `elementAlign <String>` The String representing the corner of the Overlay that should be aligned to the context element
  `contextAlign <String>` The corner of the context element that the elementAlign corner should stick to.

Returns: `void`

#### bringToTop

`void bringToTop ( )`
Places the Overlay on top of all other instances of YAHOO.widget.Overlay.

Returns: `void`

#### center

`void center ( )`
Centers the container in the viewport.

Returns: `void`

#### configAutoFillHeight

`void configAutoFillHeight ( type , args , obj )`
The default event handler fired when the "autofillheight" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configConstrainToViewport

`void configConstrainToViewport ( type , args , obj )`
The default event handler fired when the "constraintoviewport" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configContext

`void configContext ( type , args , obj )`
The default event handler fired when the "context" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configFixedCenter

`void configFixedCenter ( type , args , obj )`
The default event handler fired when the "fixedcenter" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configHeight

`void configHeight ( type , args , obj )`
The default event handler fired when the "height" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configIframe

`void configIframe ( type , args , obj )`
The default event handler fired when the "iframe" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configVisible

`void configVisible ( type , args , obj )`
The default event handler fired when the "visible" property is changed. This method is responsible for firing showEvent and hideEvent.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configWidth

`void configWidth ( type , args , obj )`
The default event handler fired when the "width" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configX

`void configX ( type , args , obj )`
The default event handler fired when the "x" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configXY

`void configXY ( type , args , obj )`
The default event handler fired when the "xy" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configY

`void configY ( type , args , obj )`
The default event handler fired when the "y" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configzIndex

`void configzIndex ( type , args , obj )`
The default event handler fired when the "zIndex" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### destroy

`void destroy ( )`
Removes the Overlay element from the DOM and sets all child elements to null.

Returns: `void`

#### doCenterOnDOMEvent

`void doCenterOnDOMEvent ( )`
Fixed center event handler used for centering on scroll/resize, but only if the overlay is visible and, if "fixedcenter" is set to "contained", only if the overlay fits within the viewport.

Returns: `void`

#### enforceConstraints

`void enforceConstraints ( type , args , obj )`
The default event handler executed when the moveEvent is fired, if the "constraintoviewport" is set to true.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### fillHeight

`void fillHeight ( el )`

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.

NOTE: 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.

Parameters:
  `el <HTMLElement>` The element which should be resized to fill out the height of the container element.

Returns: `void`

#### fitsInViewport

`fitsInViewport ( )`
Determines if the Overlay (including the offset value defined by Overlay.VIEWPORT_OFFSET) will fit entirely inside the viewport, in both dimensions - width and height.

#### forceContainerRedraw

`void forceContainerRedraw ( )`
Can be used to force the container to repaint/redraw it's contents.

By default applies and then removes a 1px bottom margin through the application/removal of a "yui-force-redraw" class.

It is currently used by Overlay to force a repaint for webkit browsers, when centering.

Returns: `void`

#### getConstrainedX

`Number getConstrainedX ( x )`
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.

Parameters:
  `x <Number>` The X coordinate value to be constrained

Returns: `Number`
  The constrained x coordinate

#### getConstrainedXY

`Array getConstrainedXY ( x , y )`
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.

Parameters:
  `x <Number>` The X coordinate value to be constrained
  `y <Number>` The Y coordinate value to be constrained

Returns: `Array`
  The constrained x and y coordinates at index 0 and 1 respectively;

#### getConstrainedY

`Number getConstrainedY ( y )`
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.

Parameters:
  `y <Number>` The Y coordinate value to be constrained

Returns: `Number`
  The constrained y coordinate

#### hideIframe

`void hideIframe ( )`
Hides the iframe shim, if it has been enabled.

Returns: `void`

#### hideMacGeckoScrollbars

`void hideMacGeckoScrollbars ( )`
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)

Returns: `void`

#### init

`void init ( el , userConfig )`
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.

Parameters:
  `el <String>` The element ID representing the Overlay OR
  `el <HTMLElement>` The element representing the Overlay
  `userConfig <Object>` The configuration object literal containing the configuration that should be set for this Overlay. See configuration documentation for more details.

Returns: `void`

#### initDefaultConfig

`void initDefaultConfig ( )`
Initializes the class's configurable properties which can be changed using the Overlay's Config object (cfg).

Returns: `void`

#### initEvents

`void initEvents ( )`
Initializes the custom events for Overlay which are fired automatically at appropriate times by the Overlay class.

Returns: `void`

#### moveTo

`void moveTo ( x , y )`
Moves the Overlay to the specified position. This function is identical to calling this.cfg.setProperty("xy", [x,y]);

Parameters:
  `x <Number>` The Overlay's new x position
  `y <Number>` The Overlay's new y position

Returns: `void`

#### onDomResize

`void onDomResize ( e , obj )`
Event handler fired when the resize monitor element is resized.

Parameters:
  `e <DOMEvent>` The resize DOM event
  `obj <Object>` The scope object

Returns: `void`

#### showIframe

`void showIframe ( )`
Shows the iframe shim, if it has been enabled.

Returns: `void`

#### showMacGeckoScrollbars

`void showMacGeckoScrollbars ( )`
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)

Returns: `void`

#### stackIframe

`void stackIframe ( )`
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.

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.

Returns: `void`

#### syncIframe

`void syncIframe ( )`
Syncronizes the size and position of iframe shim to that of its corresponding Overlay instance.

Returns: `void`

#### syncPosition

`void syncPosition ( )`
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.

Returns: `void`

#### toString

`String toString ( )`
Returns a String representation of the object.

Returns: `String`
  The string representation of the Overlay.

#### YAHOO.widget.Overlay.windowResizeHandler

`static void YAHOO.widget.Overlay.windowResizeHandler ( e )`
The DOM event handler used to fire the CustomEvent for window resize

Parameters:
  `e <DOMEvent>` The DOM resize event

Returns: `void`

#### YAHOO.widget.Overlay.windowScrollHandler

`static void YAHOO.widget.Overlay.windowScrollHandler ( e )`
The DOM event handler used to fire the CustomEvent for window scroll

Parameters:
  `e <DOMEvent>` The DOM scroll event

Returns: `void`

#### Methods inherited from YAHOO.widget.Module:

`_addToParent, _initResizeMonitor, _supportsCWResize, appendToBody, appendToFooter, appendToHeader, configMonitorResize, configVisible, destroy, hide, init, initDefaultConfig, initEvents, initResizeMonitor, onDomResize, render, setBody, setFooter, setHeader, show, toString`

### Events

#### beforeMoveEvent

`beforeMoveEvent ( x , y )`
CustomEvent fired before the Overlay is moved.

Parameters:
  `x <Number>` x coordinate
  `y <Number>` y coordinate

#### moveEvent

`moveEvent ( x , y )`
CustomEvent fired after the Overlay is moved.

Parameters:
  `x <Number>` x coordinate
  `y <Number>` y coordinate

#### YAHOO.widget.Overlay.windowResizeEvent

`YAHOO.widget.Overlay.windowResizeEvent ( )`
A singleton CustomEvent used for reacting to the DOM event for window resize

#### YAHOO.widget.Overlay.windowScrollEvent

`YAHOO.widget.Overlay.windowScrollEvent ( )`
A singleton CustomEvent used for reacting to the DOM event for window scroll

#### Events inherited from YAHOO.widget.Module:

`appendEvent, beforeHideEvent, beforeInitEvent, beforeRenderEvent, beforeShowEvent, changeBodyEvent, changeContentEvent, changeFooterEvent, changeHeaderEvent, destroyEvent, hideEvent initEvent renderEvent showEvent YAHOO.widget.Module.textResizeEvent`

### Configuration Attributes

#### autofillheight `- String`

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".
Default Value: null

#### constraintoviewport `- Boolean`

True if the Overlay should be prevented from being positioned out of the viewport.
Default Value: false

#### context `- Array`

The array of context arguments for context-sensitive positioning.

The format of the array is: `[contextElementOrId, overlayCorner, contextCorner, arrayOfTriggerEvents (optional)]`, the the 4 array elements described in detail below:

contextElementOrId <String|HTMLElement>
  A reference to the context element to which the overlay should be aligned (or it's id).
overlayCorner <String>
  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).
contextCorner <String>
  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.
arrayOfTriggerEvents (optional) <Array[String|CustomEvent]>

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

  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 : `"windowResize", "windowScroll", "textResize"` (defined in _TRIGGER_MAP private property).

For example, setting this property to `["img1", "tl", "bl"]` will align the Overlay's top left corner to the bottom left corner of the context element with id "img1".

Adding the optional trigger values: `["img1", "tl", "bl", ["beforeShow", "windowResize"]]`, will re-align the overlay position, whenever the "beforeShow" or "windowResize" events are fired.

Default Value: null

#### fixedcenter `- Boolean | String`

Determines whether or not the Overlay should be anchored to the center of the viewport.

This property can be set to:

true
  To enable fixed center positioning

  When enabled, the overlay will be positioned in the center of viewport when initially displayed, and will remain in the center of the viewport whenever the window is scrolled or resized.

  If the overlay is too big for the viewport, it's top left corner will be aligned with the top left corner of the viewport.

false
  To disable fixed center positioning.

  In this case the overlay can still be centered as a one-off operation, by invoking the `center()` method, however it will not remain centered when the window is scrolled/resized.

"contained"
  To enable fixed center positioning, as with the `true` option.

  However, unlike setting the property to `true`, when the property is set to `"contained"`, if the overlay is too big for the viewport, it will not get automatically centered when the user scrolls or resizes the window (until the window is large enough to contain the overlay). This is useful in cases where the Overlay has both header and footer UI controls which the user may need to access.

Default Value: false

#### height `- String`

CSS height of the Overlay.
Default Value: null

#### iframe `- Boolean`

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.
Default Value: true for IE6 and below, false for all other browsers.

#### preventcontextoverlap `- Boolean`

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".
Default Value: false

#### width `- String`

CSS width of the Overlay.
Default Value: null

#### x `- Number`

The absolute x-coordinate position of the Overlay
Default Value: null

#### xy `- Number[]`

An array with the absolute x and y positions of the Overlay
Default Value: null

#### y `- Number`

The absolute y-coordinate position of the Overlay
Default Value: null

#### zIndex `- Number`

CSS z-index of the Overlay.
Default Value: null

#### Configuration attributes inherited from YAHOO.widget.Module:

`appendtodocumentbody, effect, monitorresize, visible,`

Copyright © 2009 Yahoo! Inc. All rights reserved.