Print Friendly

# Class YAHOO.widget.Overlay

Package: | YAHOO.widget
Class: | Overlay
Extends: | YAHOO.widget.Module
Subclasses: | Menu, MenuModule, Panel, Tooltip
Defined In: | container_core.js

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.

## Public Properties

Property | Defined By
--- | ---
| BOTTOM_LEFT<static> : String | Overlay
<static> Constant representing the top bottom left corner of an element, used for configuring the context eleme...
| BOTTOM_RIGHT<static> : String | Overlay
<static> Constant representing the bottom right corner of an element, used for configuring the context element ...
| CSS_OVERLAY<static> : String | Overlay
<static> Constant representing the default CSS class used for an Overlay
| TOP_LEFT<static> : String | Overlay
<static> Constant representing the top left corner of an element, used for configuring the context element alig...
| TOP_RIGHT<static> : String | Overlay
<static> Constant representing the top right corner of an element, used for configuring the context element ali...
| cfg : Boolean @default | Overlay
True if the Overlay should have an IFRAME shim (for correcting the select z-index bug in IE6 and below). @config iframe
| javascript : String | Overlay
<static> The URL that will be placed in the iframe

## Public Methods

Method | Defined By
--- | ---
| Overlay() | Overlay
| align(`String elementAlign`, `String contextAlign`) : void | Overlay
Aligns the Overlay to its context element using the specified corner points (represented by the constants TOP_LEFT, T...
| center() : void | Overlay
Centers the container in the viewport.
| configConstrainToViewport(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "constraintoviewport" property is changed.
| configContext(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "context" property is changed.
| configFixedCenter(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "fixedcenter" property is changed.
| configHeight(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "height" property is changed.
| configIframe(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "iframe" property is changed.
| configVisible(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "visible" property is changed. This method is responsible for firing showEve...
| configWidth(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "width" property is changed.
| configX(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "x" property is changed.
| configXY(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "xy" property is changed.
| configY(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "y" property is changed.
| configzIndex(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "zIndex" property is changed.
| destroy() : void | Overlay
Removes the Overlay element from the DOM and sets all child elements to null.
| doCenterOnDOMEvent() : void | Overlay
Center event handler used for centering on scroll/resize, but only if the Overlay is visible
| enforceConstraints(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler executed when the moveEvent is fired, if the "constraintoviewport" is set to true.
| hideIframe() : void | Overlay
Hides the iframe shim, if it has been enabled
| hideMacGeckoScrollbars() : void | Overlay
Adds a special CSS class to the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars cannot ...
| init(`String el`, `HTMLElement el`, `Object userConfig`) : void | Overlay
The Overlay initialization method, which is executed for Overlay and all of its subclasses. This method is automatica...
| initDefaultConfig() : void | Overlay
Initializes the class's configurable properties which can be changed using the Overlay's Config object (cfg).
| initEvents() : void | Overlay
Initializes the custom events for Overlay which are fired automatically at appropriate times by the Overlay class.
| moveTo(`Number x`, `Number y`) : void | Overlay
Moves the Overlay to the specified position. This function is identical to calling this.cfg.setProperty("xy", [x,y]);
| onDomResize(`DOMEvent e`, `Object obj`) : void | Overlay
Event handler fired when the resize monitor element is resized.
| showIframe() : void | Overlay
Shows the iframe shim, if it has been enabled
| showMacGeckoScrollbars() : void | Overlay
Removes a special CSS class from the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars ca...
| syncPosition() : void | Overlay
Synchronizes the Panel's "xy", "x", and "y" properties with the Panel's position in the DOM. This is primarily used t...
| toString() : String | Overlay
Returns a String representation of the object.
| windowResizeHandler<static>(`DOMEvent e`) : void | Overlay
<static> The DOM event handler used to fire the CustomEvent for window resize
| windowScrollHandler<static>(`DOMEvent e`) : void | Overlay
<static> The DOM event handler used to fire the CustomEvent for window scroll

## Public Events

Event | Defined By
--- | ---
| YAHOO.widget.Overlay.windowResizeEvent : () | Overlay
A singleton CustomEvent used for reacting to the DOM event for window resize
| YAHOO.widget.Overlay.windowScrollEvent : () | Overlay
A singleton CustomEvent used for reacting to the DOM event for window scroll
| beforeMoveEvent : (`Number x`, `Number y`) | Overlay
CustomEvent fired before the Overlay is moved.
| moveEvent : (`Number x`, `Number y`) | Overlay
CustomEvent fired after the Overlay is moved.

## Property Details

### BOTTOM_LEFT<static>

`public String BOTTOM_LEFT<static>`
<static> Constant representing the top bottom left corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

### BOTTOM_RIGHT<static>

`public String BOTTOM_RIGHT<static>`
<static> Constant representing the bottom right corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

### CSS_OVERLAY<static>

`public String CSS_OVERLAY<static>`
<static> Constant representing the default CSS class used for an Overlay
This property is defined by Overlay.

### TOP_LEFT<static>

`public String TOP_LEFT<static>`
<static> Constant representing the top left corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

### TOP_RIGHT<static>

`public String TOP_RIGHT<static>`
<static> Constant representing the top right corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

### cfg

`public Boolean @default cfg`
True if the Overlay should have an IFRAME shim (for correcting the select z-index bug in IE6 and below). @config iframe
This property is defined by Overlay.

### javascript

`public String javascript`
<static> The URL that will be placed in the iframe
This property is defined by Overlay.

## Constructor Details

### Overlay

`public function Overlay()`
Parameters:

- None.

## Method Details

### align

`public function align(`String elementAlign`, `String 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`

This method is defined by Overlay.

### center

`public function center()`
Centers the container in the viewport.
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### configConstrainToViewport

`public function configConstrainToViewport(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### configContext

`public function configContext(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### configFixedCenter

`public function configFixedCenter(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### configHeight

`public function configHeight(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### configIframe

`public function configIframe(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### configVisible

`public function configVisible(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### configWidth

`public function configWidth(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### configX

`public function configX(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### configXY

`public function configXY(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### configY

`public function configY(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### configzIndex

`public function configzIndex(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### destroy

`public function destroy()`
Removes the Overlay element from the DOM and sets all child elements to null.
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### doCenterOnDOMEvent

`public function doCenterOnDOMEvent()`
Center event handler used for centering on scroll/resize, but only if the Overlay is visible
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### enforceConstraints

`public function enforceConstraints(`String type`, `Object[] args`, `Object 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`

This method is defined by Overlay.

### hideIframe

`public function hideIframe()`
Hides the iframe shim, if it has been enabled
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### hideMacGeckoScrollbars

`public function hideMacGeckoScrollbars()`
Adds a special CSS class to the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars cannot be hidden. See https://bugzilla.mozilla.org/show_bug.cgi?id=187435
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### init

`public function init(`String el`, `HTMLElement el`, `Object 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`

This method is defined by Overlay.

### initDefaultConfig

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

- None.

Returns:

- `void`

This method is defined by Overlay.

### initEvents

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

- None.

Returns:

- `void`

This method is defined by Overlay.

### moveTo

`public function moveTo(`Number x`, `Number 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`

This method is defined by Overlay.

### onDomResize

`public function onDomResize(`DOMEvent e`, `Object 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`

This method is defined by Overlay.

### showIframe

`public function showIframe()`
Shows the iframe shim, if it has been enabled
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### showMacGeckoScrollbars

`public function showMacGeckoScrollbars()`
Removes a special CSS class from the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars cannot be hidden. See https://bugzilla.mozilla.org/show_bug.cgi?id=187435
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### syncPosition

`public function 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.
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### toString

`public function toString()`
Returns a String representation of the object.
Parameters:

- None.

Returns:

- `String`
  The string representation of the Overlay.

This method is defined by Overlay.

### windowResizeHandler<static>

`public function windowResizeHandler<static>(`DOMEvent e`)`
<static> The DOM event handler used to fire the CustomEvent for window resize
Parameters:

- `e` : DOMEvent
  The DOM resize event

Returns:

- `void`

This method is defined by Overlay.

### windowScrollHandler<static>

`public function windowScrollHandler<static>(`DOMEvent e`)`
<static> The DOM event handler used to fire the CustomEvent for window scroll
Parameters:

- `e` : DOMEvent
  The DOM scroll event

Returns:

- `void`

This method is defined by Overlay.

## Event Details

### YAHOO.widget.Overlay.windowResizeEvent

`public event YAHOO.widget.Overlay.windowResizeEvent`
A singleton CustomEvent used for reacting to the DOM event for window resize
Subscribers will be called with the following parameters:

- None.

This event is defined by Overlay.

### YAHOO.widget.Overlay.windowScrollEvent

`public event YAHOO.widget.Overlay.windowScrollEvent`
A singleton CustomEvent used for reacting to the DOM event for window scroll
Subscribers will be called with the following parameters:

- None.

This event is defined by Overlay.

### beforeMoveEvent

`public event beforeMoveEvent`
CustomEvent fired before the Overlay is moved.
Subscribers will be called with the following parameters:

- `x` : Number
  x coordinate
- `y` : Number
  y coordinate

This event is defined by Overlay.

### moveEvent

`public event moveEvent`
CustomEvent fired after the Overlay is moved.
Subscribers will be called with the following parameters:

- `x` : Number
  x coordinate
- `y` : Number
  y coordinate

This event is defined by Overlay.

Copyright © 2006 Jack Slocum. All rights reserved.