Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

A panel with content directed at a particular point on the page.

Further Info & Examples

Constructor

new glow.widgets.InfoPanel(content, opts)

Parameters

content
Type
selector | Element | glow.dom.NodeList

the element that contains the contents of the Panel. If this is in the document it will be moved to document.body. If your content node has a child element with class "hd" it will be added to the header of the panel. Similarly, an element with class "ft" will be added to the footer of the panel.

opts
Type
Object

Zero or more of the following as properties of an object:

anim

A transition for showing / hiding the panel

From
glow.widgets.Overlay
Type
String | Function
Default
"null"
Optional
Yes

Can be "fade" or "slide", or a function which returns a glow.anim.Animation or glow.anim.Timeline. The function is passed the overlay as the first parameter, and 'true' if the overlay is showing, 'false' if it's hiding.

ariaProperties

Key-value pairs of aria properties and values

From
glow.widgets.Overlay
Type
Object
Optional
Yes

These are applied to the overlay container for accessibility purposes. By default the overlay is a polite live area.

ariaRole

The aria role of the panel.

Type
String
Default
"description"
Optional
Yes

This is used for accessibility purposes, the default is acceptable for panels which provide descriptive content for a page element

autoPosition

Position the overlay relative to the viewport

From
glow.widgets.Overlay
Type
Boolean
Default
"true"
Optional
Yes

If true, the overlay will be positioned to the viewport according to the x & y options. If false, you will have to set the position manually by setting the left / right css styles of the container property.

className

Values for the Overlay container's class attribute.

From
glow.widgets.Overlay
Type
String
Optional
Yes
closeOnMaskClick

if true then listens for a click event on the mask and hides when it fires

From
glow.widgets.Overlay
Type
Boolean
Default
"true"
Optional
Yes
context

Element to point at.

Type
String | Element | glow.dom.NodeList
Optional
Yes

If no context is provided then the panel must be positioned manually using the container property.

focusOnShow

Give the overlay keyboard focus when it appears?

From
glow.widgets.Panel
Type
Boolean
Default
true
Optional
Yes

Use 'returnTo' to specify where to send focus when the overlay closes

hideFilter

Exclude elements from hiding

From
glow.widgets.Overlay
Type
Function
Optional
Yes

When provided this function is run for every element that may be hidden. This includes windowed Flash movies if 'hideWindowedFlash' is true, and any matches for 'hideWhileShown'. In the function, 'this' refers to the element. Return false to prevent this element being hidden.

hideWhileShown

Elements to hide while the overlay is shown

From
glow.widgets.Overlay
Type
selector | Element | glow.dom.NodeList
Optional
Yes

This is useful for hiding page elements which always appear on top of other page elements. Flash movies can be handled easier using the hideWindowedFlash option.

hideWindowedFlash

Hide windowed Flash movies?

From
glow.widgets.Overlay
Type
Boolean
Default
true
Optional
Yes

When set to true, any Flash movie without wmode "transparent" or "opaque" will be hidden when the overlay shows. This is because they always appear on top of other elements on the page. Flash movies inside the overlay are excluded from hiding.

id

Value for the Overlay container's ID attribute

From
glow.widgets.Overlay
Type
String
Optional
Yes
mask

Mask to use for modal overlays

From
glow.widgets.Overlay
Type
glow.widgets.Mask
Optional
Yes

used to indicate to the user that the overlay is modal. If provided then the modal property is set to true.

modal

is the overlay modal?

Type
Boolean
Default
false
Optional
Yes

If true then a default Mask will be created if one is not provided.

offsetInContext

Position of the pointer within the context.

Type
Object
Optional
Yes

In the format {x: 24, y: "50%"}. The default points to an edge of the context, depending on the position of the pointer.

pointerPosition

Restrict the point to a particular side.

Type
String
Optional
Yes

The default is dependant on the context's position on the page. The panel will try to be where it is most visible to the user. To restrict the position, set this property to "t"/"r"/"b"/"l"; top / left / bottom / right respectively.

pointerRegisters

Identify the position of the point within pointer elements.

Type
Object
Optional
Yes

Only required for custom templates.

returnTo

Element to give focus to when the overlay closes

Type
selector | Element | glow.dom.NodeList
Optional
Yes

By default, this is the context element. For accessibility purposes you may want to set an element to give focus to when the overlay closes. This meanss devices which present data to the user by the cursor position (such as screen readers) will be sent somewhere useful.

template

An html template to use to create the panel

From
glow.widgets.Panel
Type
String
Optional
Yes
theme

Visual theme

Type
String
Default
"light"
Optional
Yes

Only applies when using the default template. Currently supported themes are "dark" and "light".

width

Width of the panel

From
glow.widgets.Panel
Type
Number | String
Default
400
Optional
Yes

Default of 400px gives a content width of 360px in the default template

x

Distance of overlay from the left of the viewport

From
glow.widgets.Overlay
Type
Number | String
Default
"50%"
Optional
Yes

If the unit is a percentage then 0% is aligned to the left of the viewport, 100% is aligned to the right of viewport and 50% is centered.

y

Distance of overlay from the top of the viewport

From
glow.widgets.Overlay
Type
Number | String
Default
"50%"
Optional
Yes

If the unit is a percentage then 0% is aligned to the left of the viewport, 100% is aligned to the right of viewport and 50% is centered.

zIndex

The z-index to set on the overlay

From
glow.widgets.Overlay
Type
Number
Default
"9991"
Optional
Yes

If the overlay is modal, the zIndex of the mask will be set to one less than the value of this attribute.

Properties

autoPosition

Position the overlay relative to the viewport

From
glow.widgets.Overlay
Type
Boolean

Description

If true, the overlay will be positioned to the viewport according to the x & y options. If false, you will have to set the position manually by setting the left / right css styles of the container property.

body

The panel's body element

container

The overlay's container.

From
glow.widgets.Overlay
Type
glow.dom.NodeList

Description

Use this to alter the width of the overlay. You can also manually position the overlay using this node when autoPosition is false.

content

The content of the overlay

footer

The panel's footer element

header

The panel's header element

isShown

True if the overlay is showing

returnTo

Element to give focus to when the overlay closes

From
glow.widgets.Overlay
Type
selector | Element | glow.dom.NodeList

Description

For accessibility purposes you may want to set an element to give focus to when the overlay closes. This meanss devices which present data to the user by the cursor position (such as screen readers) will be sent somewhere useful.

Methods

hide

Hides the overlay

From
glow.widgets.Overlay

Synopsis

myInfoPanel.hide();

Returns

this

setContext

Change element to point at.

Synopsis

myInfoPanel.setContext(context);

Parameters

context
Type
String | HTMLElement | glow.dom.NodeList

Element to point at

Returns

this

Description

If no context is provided then the panel must be positioned manually using the container property.

setPosition

Change or recalculate the position of the InfoPanel

Synopsis

myInfoPanel.setPosition(x, y);

Parameters

x
Type
Number | String
Optional
Yes

Pixel distance from the left of the document to point at.

y
Type
Number | String
Optional
Yes

Pixel distance from the top of the document to point at.

Returns

this

Description

Call with parameters to change the position of the InfoPanel or call without parameters to simply reposition. You may need to call this without parameters if the element the Panel is pointing at changes position.

show

Displays the overlay

From
glow.widgets.Overlay

Synopsis

myInfoPanel.show();

Returns

this

Events

show

Fired when the overlay is about to appear on the screen, before any animation.

From
glow.widgets.Overlay

Synopsis

glow.events.addListener(myInfoPanel, "show", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Description

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.

afterShow

Fired when the overlay is visible to the user and any 'show' animation is complete

From
glow.widgets.Overlay

Synopsis

glow.events.addListener(myInfoPanel, "afterShow", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Description

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.

hide

Fired when the overlay is about to hide

From
glow.widgets.Overlay

Synopsis

glow.events.addListener(myInfoPanel, "hide", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Description

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

afterHide

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

From
glow.widgets.Overlay

Synopsis

glow.events.addListener(myInfoPanel, "afterHide", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Documentation generated by JsDoc Toolkit 2.1.0 on Mon Jul 20 2009 14:55:31 GMT+0100 (BST)

BBC navigation

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.