Web Design Info Buttons

INFO BUTTONS

This page demonstrates how info buttons can be used to afford the user a means of selecting additional information about pages listed in a site map. Info buttons control hiding or displaying a block of information associated with some item, such as the anchors in this page list. To toggle between showing all or only selected info, click the Show All Info / Select Info field at the top of the left side bar. The text in this field indicates action to take to switch the current state. When it reads Show All Info, only selected info is displayed. In this state, when the mouse is over an i button [info button embedded in normal (left-aligned) text] the associated info is displayed. Moving off the button causes the info to disappear again. Clicking the button changes it from an open to a closed lock and locks the info so that it remains even when the mouse moves off the button.

Site Pages

• CDNext Home Page explains the goals and overall features of the CDNext development systems. It also explains how to use the web site. Here is some markup to test the info text. This is italic. This is bold. Try this anchor reference to Test Anchor Target. Don't forget to lock the text so you can go to the anchor point. The following is a JavaScript rollover anchor.
• RPM5 Board (fluid) is a fully-fluid version of a hardware unit description. In this version, the Content section is allowed to flow under the left side bar.
• RPM5 Board (semi-fluid) is nearly identical to the fully-fluid version of the RPM PCB description page except that Content is not allowed to flow under the left side bar. Under a browser that supports the CSS property overflow auto the two versions are essentially the same. Under a browser that doesn't, e.g. Internet Explorer, in the semi-fluid page the text stops flowing when the page width shrinks to impinge on the image.
• The following six pages relate to a single topic, the CDNext Integrated Development Environment (IDE).
• IDE: Overview provides an introduction to the topic and a gateway to the other pages.
• IDE: Communication Developer View describes the IDE windows that are likely to be especially useful when developing or maintaining analyzer communication drivers.
• IDE: IML Unit Developer View describes the IDE windows that are likely to be especially useful when developing hardware or software for a new Intermodule Link Unit.
• IDE: I/O Unit Developer View describes the IDE windows that are likely to be especially useful when developing new I/O system hardware.
• IDE: I/O Device Developer View describes the IDE windows that are likely to be especially useful when developing new instrument I/O device hardware.
• IDE: Script Developer View describes the IDE windows that are likely to be especially useful when developing, debugging, or using flow scripts.
• Table Shim Page demonstrates layout controlled by a transparent table with hidden pixel shims to force table cell width. This means of layout control is incompatible with the overall site, which contains too many mixed indivisible and flowable objects, specifically large images with related text.
• CDNext Site Creation Description describes the methods used to create selected page artifacts.
• DM162 Final Project Checkoff describes elements of the web site that meet the requirements of the final project.

INFO BUTTONS DESCRIPTION

Info buttons provide display control at an intermediate level between popup tooltips and URL links. Tooltips are short text messages that displays at the cursor when the cursor hovers for a while over a particular item. Their main positive features are:

• The page context is not disturbed to display the information, as is the case for a URL link, which completely replaces the page.
• Any item can have an associated tooltip without cluttering the page and consuming valuable real estate.

Their main negative features are:

• They do not pop up immediately. The user doesn't even know whether one exists for a particular visible item without waiting to see whether one appears.
• They remain displayed for a specific time not under user control. Sometimes they seem to remain too long, hiding a portion of the page. Other times they don't remain long enough, forcing the user to dither the mouse around the associated item to try to keep the tooltip displayed long enough to digest its Content.
• Because they hide a portion of the underlying page and don't remain open, they can't contain very much information
• They can only contain text, even though images and links could be useful.

Tooltips and URL links represent opposite extremes. Every positive tooltip feature is a link negative, while every negative tooltip feature is a link positive. Info buttons represent a compromise between the two. They do not simply combine the best of both, which is not feasible. In some situations they work better than either tooltips or links; in others a tooltip or link will be better than an info button.

Info buttons appear as small (18px square) icons approximately the size of the standard cursor. This makes them somewhat larger than most text characters but still small enough to fit into a line of text without significantly increasing the line height. This page demonstrates a typical use, where an info button appears at the end of each link in a list. The normal link item line spacing accommodates the height of the info button. The info button controls the display of information related to the adjacent link.

Info buttons have three states. In their inactive state, indicated by an iconic "i", the information is not displayed. When the cursor rolls over the button, the information is immediately displayed, causing subsequent page Content to move but remain displayed. This is the unlocked state, indicated by the button face changing to the image of an open padlock. In this state, if the cursor rolls off the button, the button immediately returns to its inactive state, the information disappears, and the page returns to its previous display. In the unlocked state (i.e. while the cursor remains on the button) clicking the info button changes it to the locked state, indicated by a closed padlock image. In this state, the information remains displayed even when the cursor rolls off the button. In the unlocked state, even moving into the information block causes the information to disappear. The locked state enables the user to move the cursor into the block to access any URL links that might be included in the block. A locked info button remains in this state until the user clicks it, which restores it to the unlocked state. Multiple info buttons can be simultaneously in the locked state, affording the user a means of mentally comparing or combining different information blocks.

Users unfamiliar with a website might prefer that all information normally controlled by info buttons be displayed without having to lock each instance. This is supported by an information control option, typically presented, as in this page, as the first item in the link bar. This control is composed of the iconic "i" plus the text "Show All Info", when the info buttons are in control, or "Select Info" when they are not. Clicking this control to show all information causes the page to be displayed without info buttons and with all of the controlled text displayed.

The information control option works by means of a "cookie". Changing whether all or selected information is displayed for one page automatically changes the mode for all other pages in the site. Disabling cookies disables this control means, but the info buttons can still operate normally. However, their operation depends on JavaScript. If this is disabled, the page will either display with all controlled information displayed or none (and with no means whatsoever to display it). Without run-time control, only the page (HTML) itself can determine whether all or no info is displayed. Typically, all information is displayed by default, as page clutter is usually less of a problem than inadequate information, even if only supplemental.

FORMAT RESTRICTIONS

Info buttons are intended primarily to provide supplemental information to items in a list. In this context, the best visual association of the info block with the item is achieved if the block is inline, making the info content appear as a continuation of the item. Exposing this block changes page content after the button but not before it. If the button is located in a left- justified line, the preceding page formatting will not change. With any other alignment, the entire line is reformatted, usually moving the button out from under the cursor, making rollover impossible. Therefore, an info button must either be the first item of the line in which it appears or else the line must be left-justified. Most lists are left-justified anyway, but this restriction must also be followed in paragraphs that contain info buttons.

This page is fully fluid, with the left-side link bar positioned using the CSS property float left. The rest of the page represents a site map with links to pages. The page is taken out of context and these links don't function. Each link has an associated info button. Even without info buttons, special coding techniques are required to make the items to the right the link bar render identically to those against the page body left border under the link bar as explained in RPM5. The info buttons may require additional control.

The hidden content is displayed by changing its CSS display property from none to inline. When this occurs, the browser must render the previously hidden content. The browser creates space for this by moving, rather than covering, previous page contents. Although this behavior may not be strictly required, all common browsers act this way. If they did not, info buttons would not work as intended. However, not all browsers completely repaint the page. Most importantly, Internet Explorer allows portions of the previous rendering to remain if they are not covered by the new layout. For example, if the links in this site map page list are outdented left relative to their information blocks, the portion that is outdented is not erased in the new rendering except where covered by new outdented content. Similarly, allowing a larger top or bottom margin for a particular list item, for example to make a non-link section header, risks leaving old content in the extra margin space in the new rendering of the header.

This problem has been observed only in Internet Explorer and only in a mutable space to the right of a float-left element. When a table is used to make the sidebar, there is no problem. Firefox doesn't exhibit this problem. IE's problem can be corrected by forcing it to repaint the entire page. A script can do this by moving or resizing the window (but not by 0, which IE ignores) which is unacceptable, or by telling the browser to reload the page, which would prevent info buttons from working. However, it has been determined by experiment that IE repaints any DOM element when one of its style properties changes. We don't want to actually change a property any more than we want to move the window but repainting occurs even if the property is changed and then immediately restored. For efficiency, this treatment can be limited to just the container of the info areas.

Not all browsers have been tested for the problem or for the IE hack. Since none that have been tested have a problem with the hack, it seems reasonably safe. However, since it is not known whether there are browsers that have the problem and are not corrected by the hack, it would be prudent to try to avoid vulnerable formatting. Primarily this only requires left-alignment of all text, including first line, headings, and controlled info, in the info button areas. This only leaves the first line under the floating link bar vulnerable and there seems to be no means of avoiding a potential problem here under IE. However, this isn't very important. The residual text is just a cosmetic blemish and disappears automatically under a wide variety of circumstances. A fully fluid layout is used for this page specifically to show the effect of exposing and hiding info blocks in an uncorrected browser. If the problem exists, it will only show up in the first line under the link bar because the restricted left-alignment is used in the site map list. A real site map page would look better without the list floating under the side bar.

INFO BUTTON IMPLEMENTATION

INFO BUTTON ACTION

Each info item contains two parts, the button img and the block span. Typically, the span contains only text but it may also contain images and anchors (launch points but not targets, as the block is often hidden). Except when the page loads, all events are handled through the button's event handlers:

• onMouseOver = "showInfo( 'btnId', 'infoId' ); "
• onMouseOut = "hideInfo( 'btnId', 'infoId' );"
• onClick = "toggleLock( 'btnId' );"
• onMouseDown = "btnId.src=lock.src;"

where btnId is the id of the button img and infoId is the id of the info block span. The btnId name is typically the same as the infoId name with a "b" prefix, e.g. "btextInfo" with "textInfo", although this is not required.

The status of the info pair is indicated by properties and attributes of both the span and the img. The span's display property has two states, "inline" and "none". The img's src has three states, "lock.src", "unlock.src", and "info. src". Its alt has two states, "unlocked" and "locked". Using two semi-independent state variables for the button img simplifies event handling. The alt's primary purpose is as this state variable, obviating the need to define (via JavaScript) a separate state variable for each info pair. Secondarily, assigning these values to alt satisfies HTML standards with reasonable names although these would only be relevant if the button images could not be located, in which case the entire info control system would probably be dysfunctional. Tooltips for the buttons would be only an annoyance. To prevent IE from using the alt value as a tooltip, each button img's title is assigned an empty string. Info button (img and span) properties are declared in tech. css, infhide.css, and infshow.css. Script functions are defined in infbtn.js.

function toggleLock( btnId )
{
  btnRef = document.getElementById( btnId );
  if( btnRef.alt == lockText )
  {
    btnRef.alt = unlockText;
    btnRef.src = unlock.src;
  }
  else
  {
    btnRef.alt = lockText;
    btnRef.src = lock.src;
  }
}

ToggleLock toggles the button's state between locked and unlocked by assigning "locked" or "unlocked" to the img alt and "lock.gif" or "unlock.gif" to its src. It does nothing to the span's display property. This function never changes the button to its third state "i", which can exist only when the mouse is not over the button, in which case there can be no onClick event. This is the only function that changes the alt state.

function showInfo( btnId, infoId )
{
  infoRef = document.getElementById( infoId );
  if( infoRef.style.display != "inline" ) 
  {
    infoRef.style.display = "inline";
    (document.getElementById( btnId )).src = unlock.src;
    infoContainer.style.display = "none";
    infoContainer.style.display = "block";
  }
}

ShowInfo does nothing if the block is already displayed, regardless of the button state, although this must be locked if the block is already displayed at onMouseOver. If the block is hidden, its display property is changed to "inline" and the button img src is changed to "info.gif". The button's alt must be "unlocked" and this is not changed. To determine whether the block is already displayed, this function tests for != "inline" instead of == "none" to avoid the following problem. If CSS display:none has established the element's display mode, JavaScript test for == "none" fails. However, if JS assigns "none" then the test doesn't fail. Testing for != "inline", which fails regardless of how "none" was assigned, makes the element immediately responsive as soon as the page loads. InfoContainer is a reference to the div element that contains all of the info buttons. When the page loads, the script code infoContainer = document.getElementById( "infoContainer" ) assigns this based on the the html definition <div id="infoContainer" class="Content">. Assigning the display first "none" and then "block" tricks IE into repainting the entire element, removing residual layout fragments.

function hideInfo( btnId, infoId )
{
  if( ( infoRef = document.getElementById( infoId )).display != "none" &&
      ( btnRef = document.getElementById( btnId )).alt != "locked" )
  {
    infoRef.style.display = "none";
    btnRef.src = info.src;

    /* Trick IE into removing residuals. */
    infoContainer.style.display = "none";
    infoContainer.style.display = "block";
  }
}

HideInfo hides the span only if it is not already hidden and the button is not locked. If both of these conditions are met, the span's display is changed to "none" and the button's img src to "info.gif". The button's alt must be "unlocked" and this doesn't need to change.

The onMouseDown response simply changes the button image to the closed lock as user feedback when the button is currently an open lock. The inverse, changing a closed lock to an open lock, would also be worthwhile but would complicate the onMouseOut response. If the user presses the mouse key and then rolls off without releasing the key, the previous image needs to be restored. In the unlocked state, this happens automatically because roll off reverts to the hidden info state. In the locked state, onMouseOut would have to take action to restore the closed lock image.

SHOW ALL OR SELECTED INFO

Info button action depends on JavaScript. If scripting is disabled, the info blocks may either be displayed or hidden but only all together. Whichever approach is taken must be embedded in HTML and CSS. Tech.css contains declarations that support default display all info blocks but, after including the style sheet, the page itself can override these to display none. Even users with scripting enabled might want to be able to display all info by a single selection. This is supported using the same means used to support the scripting disabled situation. In any case, the page must be loaded or reloaded to effect the desired format.

If all info is displayed, the info buttons are not. If no info is displayed, all buttons are displayed if JavaScript is enabled. This can easily be controlled by assigning the info button img and span display properties as "inline" or "none". The button event functions do this, but for only one button at a time. A script could scan the DOM, adjusting each info button pair's display properties, but this isn't available when scripting is disabled. Instead, the img and span style declarations are first assigned for the default show all or none and then these declarations are optionally overridden under script control. If scripting is disabled, the default mode is always in effect. Otherwise, if the script determines that the other mode has been selected, a small CSS file changing only these properties (and the background color of a control state indicator button) is loaded. These assignments occur as the browser parses the page head so the body is processed only according to the final result rather than once as default and then again as the alternative. However, changing the mode (when scripting is enabled) requires the page to be reloaded.

The script cannot know which mode has been selected by any means embedded in the page, the style sheets, or the script file. This leaves a cookie as the only possibility. In the current implementation, the one cookie allowed a domain is dedicated to telling whether the info display mode is all or selected. With more complicated cookie parsing, this functionality could be achieved with one element from a complex (semicolon-delimited) cookie string value. For infbtn.js to be usable for different domains, the cookie's name must be defined in each HTML page that includes infbtn.js. For the CDNext web site, the cookie's name is defined by the JavaScript statement siteCookie = "cdNextInfo"; preceding the HTML statement <script src="infbtn.js"></script>.

var cookies; // Holds all of the document's cookies.

function readCookie( name ) 
{
  cookies = document.cookie;
// Declare variable to set the "name=" value.
  var start = cookies.indexOf(name + "=");
// Get the index if the cookie name is found.
  if (start == -1)
    return null;
    
// Get the first character of the cookie.
  start = cookies.indexOf("=", start) + 1;
// Read to the end of the cookie.
  var end = cookies.indexOf(";", start);
  if (end == -1)
    end = cookies.length;
    
// Get the cookie value, reversing the escaped format by
// using the unescape method.
  var value = unescape(cookies.substring(start, end));
  if( value == null )
    return null;
  else
    return value;
}

/* Automatic statements execute as the file loads. */
var infCookie = readCookie( siteCookie );

if( infCookie == "hide" )
  document.write( '<link rel="stylesheet" 
   type="text/css" href="infhide.css" >');

In addition to callable functions, infbtn.js includes some JavaScript statements that execute as the browser parses the file. These are critical to the full-page info control. Other than defining the cookie's name, the HTML page is oblivious to the cookie and needs no other JavaScript code. The first automatic statement in the file calls readCookie to assign "show", "hide", or null to the cookie named by the HTML page. The second automatic statement inspects this value. If it is "hide" then the default show all is changed by writing into the document HTML code to include infhide.css. The browser does this immediately upon parsing the statement. The next statement the browser parses will be this one that it just inserted. But it is HTML rather than JavaScript. Many browsers have been tested with this. They all respond the same way; they properly process the HTML, loading the style sheet, but then reject any additional JavaScript statements until encountering another script tag. Therefore, this must be the last statement in infbtn.js.

An info button control field is placed in the top position of the linkbar. This is an anchor but, instead of jumping to a URL, it calls the JavaScript function toggleInfoCookie. This anchor is embedded in an h3 instead of the ul container used for the other anchors in the linkbar in order to match the height of the linkbar h3, which is matched to the height of the adjacent horizontal task bar. In addition to the anchor text, the control field contains an iconic "i" with a transparent background. This enables a CSS rollover type background change to indicate the mode. It is the same light blue as the linkbar when the mode is show info by selection but yellow when the mode is show all. This is set by the default CSS style and changed by the alternate style sheet. In the standard case, the default is yellow while infhide.css changes it to blue.

<h3 class="InfoControl">
  <img src="inftrans.gif" 
  alt="Info Show" 
  title="" /><a href="javascript:toggleInfoCookie()" 
  title="This requires JavaScript"
  id = "infshowhide">Show/Hide Info</a></h3>

.InfoControl img { 
  vertical-align: top;
  margin: 0 4px 0 0;
  height: 20px; /* Controls field height in IE */
  width: 18px;   
  background-color: #fffb35; 
/* BG yellow in Show All state */
}

img.InfoBtn  { display:inline; }
span.InfoBtn { display:none; }
.InfoControl img { background-color: #c5d8ee; } 
/* Show/Hide button BG light gray-blue. */

ToggleInfoCookie changes the cookie's value from "hide" to "show" and vice versa. It then causes the page to reload.

function toggleInfoCookie()
{
  var exp = new Date();
  var expiration = exp.getTime() + 315360000000; 
  // 10*365*24*60*60*1000 = 3.1536e11 = 10 years.
  exp.setTime( expiration );
  val = readCookie( siteCookie );
  document.cookie = siteCookie + "=" + 
   ( val == "hide" ? "show" : "hide" ) + 
   "; expires=" + exp.toGMTString();
  location.reload( false );
}

var infCtrl = document.getElementById( "infshowhide" );
if( infCookie == "hide" )
{
  infCtrl.title = "Change to continuous display of all Info";
  infCtrl.innerHTML = "Show All Info";
}
else
{
  infCtrl.title = "Change to showing only Info selected by button";
  infCtrl.innerHTML = "Select Info";
}

As explained previously, when the page reloads, the default "show" styles are first established by tech.css. Then, still in the page head, the browser processes infbtn.js. The last JavaScript statement in this file loads infhide.css if the cookie value is "hide". One final action is required for the control field to make sense. The text tells what will happen if clicked. If the mode is "show" the text reads "Select Info"; if "hide" then "Show All Info". JavaScript code at the end of the HTML page assigns the appropriate anchor text and title for tooltip.

Site Link Dummy Target

These site links are dummies for demonstrating info buttons

Test Anchor Target

This is some dummy text for the Test target

Run Anchor Target

This is some dummy text for the Run target