Version 1.7InfoPanel Widget

Overview

The glow.widgets.InfoPanel widget places a box on top of other elements, pointing to a particular element. For example, InfoPanel can be used to alert the user to a particular form field or provide contextual help.

InfoPanel comes with a built in design which can be modified using CSS, or a completely different HTML template can be provided.

InfoPanel extends glow.widgets.Panel and therefore glow.widgets.Overlay, all methods and properties of Panel & Overlay are available in InfoPanel.

Using the InfoPanel widget

Creating a basic InfoPanel

It is often desirable, for accessibility reasons, that the content for your InfoPanel comes from an existing element on the page. When this method is used, the InfoPanel will hide the content on the page until it is shown.

InfoPanel will react to certain class names on the children of your content element:

hd

This will be added to the header of the panel

ft

This will be added to the footer of the panel

HTML in the document:

<p> <label for="searchBox">Search:</label> <input id="searchBox" name="searchBox" />
</p>
<div id="simpleInfoPanel"> <h2 class="hd">Search field</h2> <p>The info panel can be used to help the user...</p>
</div>

JavaScript

//create InfoPanel instance
var myInfoPanel = new glow.widgets.InfoPanel("#simpleInfoPanel", { context: "#searchBox"
});
//display panel
myInfoPanel.show();

Search:

The first parameter of the constructor idetifies the content of the InfoPanel. This can be an array of nodes, a single node, a CSS selector (as supported by glow.dom.get) or a Glow NodeList.

The second parameter is an options object, the 'context' property which tells the panel what to point at. As with the first parameter, this can be an array of nodes, a single node, a CSS selector or a Glow NodeList.

Under those circumstance where is not desirable that the content come from the page, then a NodeList of the content must be created.

//create InfoPanel instance
var myInfoPanel = new glow.widgets.InfoPanel( glow.dom.create('<div id="simpleInfoPanel">' + '<h2 class="hd">Search field</h2>' + '<p>The info panel can be used to help the user...</p>' + '</div>' ), { context: "#searchBox" }
);
//display panel
myInfoPanel.show();

Controlling the position of the InfoPanel

InfoPanel will automatically point to the edge of the context element, on the side with the most amount of room. However, you can control where the panel points to within the context, and which side of the context the panel appears on.

For instance, if you're pointing to elements on a toolbar, you can force the panel to appear below the context item. In some forms it may be more natural for the panel to appear to the right of the context.

HTML in the document:

<div id="contextBox1"></div>
<div id="positionedPanel"> <h2 class="hd">Here is a box!</h2> <p>Here's the box you're looking for...</p>
</div>

JavaScript

//create Panel instance
var myInfoPanel = new glow.widgets.InfoPanel("#positionedPanel", { context: "#contextBox1", pointerPosition: "t", offsetInContext: {x: "50%", y: "50%"}
});
//display panel
myInfoPanel.show();

By setting pointerPosition to "t" we're forcing the pointer to appear on the top of the InfoPanel. Other settings are "r", "b", "l", meaning right, bottom or left respectively.

offsetInContext sets where the pointer should be within the context element. This can take integer values, which are pixels from the top-left of the context, or (as above) percentage values expressed as strings.

Refer to the API for how to change the mask and position of the InfoPanel. These features are also covered in the Panel and Overlay user docs, which InfoPanel extends.

For a complete listing of methods and properties, Refer to the API.

Templating: Completely changing the design of the InfoPanel

Templating a Panel is covered in Panel user docs. Templating an InfoPanel is the same except for additional class names that need to be in your template.

glow-infoPanel-pointerT

Element used as the pointer on the top of the panel

glow-infoPanel-pointerR

Element used as the pointer on the right of the panel

glow-infoPanel-pointerB

Element used as the pointer on the bottom of the panel

glow-infoPanel-pointerL

Element used as the pointer on the left of the panel

If you provide a template, you may also want to use the 'pointerRegisters' option to identify where the points within your pointer elements are. This is an object with properties 't', 'r', 'b' & 'l'.

{ t: {x: "50%", y: 0}, r: {x: "100%", y: "50%"}, b: {x: "50%", y: "100%"}, l: {x: 0, y: "50%"}
}

For a complete listing of methods and properties, Refer to the API.