Class glow.ui.Overlay

Extends glow.ui.

Defined in: ui.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	glow.ui.Overlay(content, opts) A container element displayed on top of the other page content

Field Summary
Field Attributes	Field Name and Description
	hideFlash Hides all Flash elements on the page, outside of the overlay.
	showFlash Hides all Flash elements on the page, outside of the overlay.
	shown True if the overlay is shown.

Method Summary
Method Attributes	Method Name and Description
	hide(delay) Hides the overlay after an optional delay period and animation
	setAnim(anim) Set the animation to use when showing and hiding this overlay.
	show(delay) Displays the overlay after an optional delay period and animation.

Event Summary
Event Attributes	Event Name and Description
	afterHide(event) Fired when the overlay has fully hidden, after any delay or hiding animation has completed.
	afterShow(event) Fired when the overlay is showing to the user and any delay or 'show' animation is complete.
	hide(event) Fired when the overlay is about to hide.
	show(event) Fired when the overlay is about to appear on the screen, before any animation.

Class Detail

glow.ui.Overlay(content, opts)

A container element displayed on top of the other page content

			var myOverlay = new glow.ui.Overlay(
				glow(
					'' +
					'  Your Story has been saved.' +
					''
				).appendTo(document.body)
			);
			
			glow('#save-story-button').on('click', function() {
				myOverlay.show();
			});

Parameters:
{selector|NodeList|String|boolean} content: the element that contains the contents of the overlay. If not in the document, you must append it to the document before calling show().
{object} opts Optional
{function|selector|NodeList|boolean} opts.hideWhenShown Optional: Select which things to hide whenevr the overlay is in a shown state. By default all `object` and `embed` elements will be hidden, in browsers that cannot properly layer those elements, whenever any overlay is shown. Set this option to a false value to cause the overlay to never hide any elements, or set it to a bespoke selector, NodeList or a function that returns a NodeList which will be used instead.

Field Detail

hideFlash

Hides all Flash elements on the page, outside of the overlay. This should only be neccessary on older browsers that cannot properly display overlay content on top of Flash elements. On those browsers Glow will automatically call this method for you in the onshow event, and will automatically call showFlash for you in the afterhide event.

showFlash

Hides all Flash elements on the page, outside of the overlay. If a Flash element has been hidden by more than one overlay, you must call showFlash once for each time it was hidden before the Flash will finally appear.

{boolean} shown

True if the overlay is shown. This is a read-only property to check the state of the overlay.

Method Detail

hide(delay)

Hides the overlay after an optional delay period and animation

Parameters:
{number} delay Optional, Default: 0: The delay before the overlay is shown. By default, the overlay will show immediately. Specify a number of seconds to delay showing. The event "afterShow" will be called after any delay and animation.

Returns:: this

setAnim(anim)

Set the animation to use when showing and hiding this overlay.

Parameters:
{string|Array|Function|null} anim: Anim to use. At its simplest, this can be the string 'slide' or 'fade', to give the overlay a fading/sliding animation. If this value is an animation definition, in the form of an array of arguments to pass to the glow.Anim constructor, those values will be used to create the show animation. The hide animation will then be the reverse of the show. This is the easiest option if you intend your show and hide animations to simply reverse one another. Alternatively, if you need more control over your show and hide animations, you can provide a function. This function will be called whenever the overlay has its show or hide method invoked, and will be provided a boolean (true meaning it's being shown, false meaning it's being hidden), and a callback. You can then manage the animations yourself within that function, and then invoke the callback when either animation is complete. In your function, 'this' refers to the overlay. Passing null will delete any previously set animation.

Returns:: this

show(delay)

Displays the overlay after an optional delay period and animation.

Parameters:
{number} delay Optional, Default: 0: The delay before the overlay is shown. By default, the overlay will show immediately. Specify a number of seconds to delay showing. The event "afterShow" will be called after any delay and animation.

Returns:: this

Event Detail

afterHide(event)

Fired when the overlay has fully hidden, after any delay or hiding animation has completed.

Parameters:
{glow.events.Event} event: Event Object

afterShow(event)

Fired when the overlay is showing to the user and any delay or 'show' animation is complete. This event is ideal to assign focus to a particular part of the overlay. If you want to change content of the overlay before it appears, see the 'show' event.

Parameters:
{glow.events.Event} event: Event Object

hide(event)

Fired when the overlay is about to hide. If you prevent the default action of this event (by returning false or calling event.preventDefault) the overlay will not hide.

Parameters:
{glow.events.Event} event: Event Object

show(event)

Fired when the overlay is about to appear on the screen, before any animation. At this point you can access the content of the overlay and make changes before it is shown to the user. If you prevent the default action of this event (by returning false or calling event.preventDefault) the overlay will not show.

Parameters:
{glow.events.Event} event: Event Object

Classes

Class glow.ui.Overlay