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

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

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

Search field

The info panel can be used to direct the users attention to specific elements on the page. For example, InfoPanel can be used to alert the user to a particular form field or provide contextual help.

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.

glow.ready(function() {
  // create the content for our panel
  var panelContent = 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>'
  );
  
  //create InfoPanel instance
  var myInfoPanel = new glow.widgets.InfoPanel(panelContent, {
    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

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

Here is a box!

Here's the box you're looking for, look! Here it is.

This box has been forced to appear below the box above and point to the centre of the element.

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.

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.