Active Menu

Introduction

This file contains a collection of functions which add interactivity and formatting to a definition list. The interactivity consists of a list of headlines positioned next to a box which contains the story associated with the headline. When a headline is moused over it will be highlighted and it's story shown in the box. The format of the underlying code are two lists that are side-by-side.

The interactivty uses DOM-compliant coding and as a result older browsers (such as Netscape Navigator 4.x) will not perform any of the operations. Also, the functionality of the script was design so that if javascript were disabled or the page accessed by an older browser the user would still be able to view the content of the page.

Requirements

A W3C DOM-compliant browser with JavaScript and CSS support enabled. Tested in both standards mode and quirks mode.

Tested and functional:

IE on Windows XP SP2 (6.0.2900.2180.xpsp_sp2_gdr.050301-1519)
Firefox v1.4 on Windows XP SP2 and Mac OS X 10.3.9
Safari v1.3.1

Tested and non-functional:

Netscape 4.x for Windows XP SP2/Mac OS X 10.3.9
- this is by design
IE on Mac OS X 10.3.9
- this is by design
- styles are applied

Usage

Attach the JS file (formatted or size-optimized) to a document using <script src...></script> or some other mechanism.

Include in the html document a stylesheet that contains the basic style information. Additional styling can be defined as desired, but the basic style information must be included for the script to function as expected.

The menu uses a <div> with an id attribute of "activeMenuBox" for the container object. Inside the <div> should be another <div> with an id attribute of "activeMenuList". activeMenuList is filled with the headlines dynamically and right-floated by default, there is no need to manually enter any information in this container. Following activeMenuList should be a definition list . The <dt>s of this list should contain the linked headlines. The <dd>s of this list, of which there can be multiple for each headline, should contain the associated story. By default images inside a <dd> are floated to the left.

Modify user parameters as desired. The following parameters can be set on the web page referencing this script after the script reference.

activeMenu_bolResize2Fit: [boolean] Indicates whether or not to resize the story box to fit the height of the longest story. By default the story box is set to a height defined in the stylesheet. When set to false, the story box will have a scroll bar when it is displaying a story that is too long to fit.; Default: false
activeMenu_intActiveItem: [integer] The zero-based index of the news item to show when the menu has completed initialization.; Default: 0
activeMenu_strEvent: [string] A string identifying the event on the list of headlines that changes the content of the story box. These can be any of the standard events (such as click, mouseover, mouseup, or focus).; Default: "mouseover"
activeMenu_objInsertBefore: [string] The ID of an object contained within the activeMenuList <div> that the headline list should be inserted before.; Default: "" (empty string)

Sample

<html>
<head>
<title>Active Menu Sample</title>
<link rel="stylesheet" type="text/css" href="activeMenu.css">
<script type="text/javascript" src="activeMenu.js"></script>
</head>
<body>
<div id="activeMenuBox">
<div id="activeMenuList"></div>
<dl>
<dt><a href="http://www.google.com">Headline #1</a>
<dd><img src="g.gif" alt="Placeholder Image" width="85" height="85"></dd>
<dd><p>If the inverting-core acceptor deflects the complex chronotron-feedback analysis, try to provoke a coil-composition reflex and several quantum biosphere resonances, this will create a restricted isovolumic cochrane graviton-prediction, which ought to in fact dampen the polarizing maintenance-filament formulas. Then attempt a minimum abstract component-delay correction phase to input a reversible lucifugal primary ionization perimeter operation to cancel the celestial info-sphere greenhouse effect. <a href="http://www.google.com">Check it out</a>!</p></dd>
<dt><a href="http://www.google.com">Headline #2</a></dt>
<dd><p>If the inverting-core acceptor deflects the complex chronotron-feedback analysis, try to provoke a coil-composition reflex and several quantum biosphere resonances, this will create a restricted isovolumic cochrane graviton-prediction, which ought to in fact dampen the polarizing maintenance-filament formulas. Then attempt a minimum abstract component-delay correction phase to input a reversible lucifugal primary ionization perimeter operation to cancel the celestial info-sphere greenhouse effect. <a href="http://www.google.com">Check it out</a>!</p> <p>If the inverting-core acceptor deflects the complex chronotron-feedback analysis, try to provoke a coil-composition reflex and several quantum biosphere resonances, this will create a restricted isovolumic cochrane graviton-prediction, which ought to in fact dampen the polarizing maintenance-filament formulas. Then attempt a minimum abstract component-delay correction phase to input a reversible lucifugal primary ionization perimeter operation to cancel the celestial info-sphere greenhouse effect. <a href="http://www.google.com">Check it out</a>!</p></dd>
<dt><a href="http://www.google.com">Headline #3</a></dt> <dd><p>If the inverting-core acceptor deflects the complex chronotron-feedback analysis, try to provoke a coil-composition reflex and several quantum biosphere resonances, this will create a restricted isovolumic cochrane graviton-prediction, which ought to in fact dampen the polarizing maintenance-filament formulas. Then attempt a minimum abstract component-delay correction phase to input a reversible lucifugal primary ionization perimeter operation to cancel the celestial info-sphere greenhouse effect. <a href="http://www.google.com">Check it out</a>!</p></dd>
<dt><a href="http://www.google.com">Headline #4</a></dt>
<dd><p>If the inverting-core acceptor deflects the complex chronotron-feedback analysis, try to provoke a coil-composition reflex and several quantum biosphere resonances, this will create a restricted isovolumic cochrane graviton-prediction, which ought to in fact dampen the polarizing maintenance-filament formulas. Then attempt a minimum abstract component-delay correction phase to input a reversible lucifugal primary ionization perimeter operation to cancel the celestial info-sphere greenhouse effect. <a href="http://www.google.com">Check it out</a>!</p></dd>
<dd><p>If the inverting-core acceptor deflects the complex chronotron-feedback analysis, try to provoke a coil-composition reflex and several quantum biosphere resonances, this will create a restricted isovolumic cochrane graviton-prediction, which ought to in fact dampen the polarizing maintenance-filament formulas. Then attempt a minimum abstract component-delay correction phase to input a reversible lucifugal primary ionization perimeter operation to cancel the celestial info-sphere greenhouse effect. <a href="http://www.google.com">Check it out</a>!</p></dd>
</dl>
</div>
</body>
</html>

Comments on the sample:

Line 4 - Link to the activeMenu stylesheet.
Line 5 - Link to the activeMenu javascript.
Lines 8-21 - The activeMenu container and its contents.
Line 9 - The activeMenuList container that will be filled with the list of headlines.
Lines 10-20 - The definition list that contains the headlines and stories.

See the demo page for a demonstration of the features of this script.

Functions

The following functions are included in the show/hide code library. Additional line-item documentation is provided in the code itself. Source information for public, externally developed functions is provided; documentation for these functions is available from the source.

Function	activeMenu_addEvent
Source	Scott Andrew LePera http://www.scottandrew.com/weblog/articles/cbs-events Cross-browser code to add an event handler to a DOM object
Parameters	obj [object] the DOM object to which an event is being attached evType [string] the event handler being added ('click', 'mouseover', etc.) fn [function] the function called by the event handler useCapture [boolean] determines if the event fires during capture or bubble
Notes	2005-09-20 (bsweeney@aaas.org) removed alert for unsupported browsers

Function	sh_lib_bwcheck
Source	DHTML Central http://www.dhtmlcentral.com/projects/lib/reference.asp?m=58 Creates an object that stores information about the user agent
Parameters	None
Notes	2006-05-05 (bsweeney@aaas.org) added a check for IE7 2005-09-20 (bsweeney@aaas.org) added a check for Safari

Function	activeMenu_init
Details	This function initializes the activeMenu process. The activeMenu container element is given a class of activeMenu (many of the relevant styles are associated with this class to avoid having them applied in browsers that are unable to process the script). The definition list inside the activeMenu container is parsed for the `<dt>` (containing the story headline) and `<dd>` (containing the story detail) elements that comprise the story. Each story is given a unique class name, determined upon encountering a `<dt>,` which is assigned to the `<dt>` and `<dd>`s. A reference to the link contained in each `<dt>` is pushed onto the araStoryLinks array (used for creating the headline list) and references for the `<dt>`s and `<dd>`s are pushed onto the araStoryDetail array (used to access the story elements). Next the script creates an unordered list with each `<li>` in this list containing a link from the araStoryLinks array. These links are given an `id` associating it with the story and an event (determined based on the value of `activeMenu_strEvent`) is set that calls the `activeMenu_change()` function. Each link is pushed onto the araStoryList array. When the list is complete it is appended to the DOM inside the activeMenuList container element. If the `activeMenu_bolResize2Fit` variable is set to `true` then the next step is to calculate the "height" of each story. By default the elements of the DL associated with activeMenu are set to `display: none`, which makes a height calculation impossible. First an individual story is made visible using the `activeMenu_change()` function. Then the height of that story is calculated. If no height is set on the DL then we can calculate the maximum height accurately based on the height of the DL with each individual story showing. Otherwise we need to calculate the height of the DT and DDs associated with a story. The second method is not as accurate because the margins of an element are not included in the calculation. A fudge factor is assessed based on the number of DDs, but this may not always produce the correct calculation. Additionally, the calculation of the height used by a DD with an image is complicated by the fact that images are floated by default. Since the image is floated two problems are encountered: the height of the DD is effective zero (in gecko-based browsers; the height of the image is not an accurate measurement of the space used by the DD. To get around this problem the height of a DD with an image is calculated by multiplying the image height by a percentage based on the area used by the image inside a box surrounding the image and covering the full width of the DL. Finally the `activeMenu_change()` function is called with the index of the item to be shown on load (as indicated by the `activeMenu_intActiveItem` variable ).
Parameters	None (used as event handler)
Notes	2006-01-27 (bsweeney@aaas.org) The height calculation only works if there is not height set on the activeMenu DL element or its child nodes or if the set height is less than the maximum height of each story (DT+DD). Otherwise the height set by the stylesheet is used.

Function	activeMenu_change
Details	This function controls which story is displayed and which headline in the headline list is highlighted. First the araStoryList array is parsed. The element with an id matching the storyID is given a class of storySelected while the others have this class removed. Next the araStoryDetail array is parsed. The elements with a class matching the storyID are given a class of storySelected while the others have this class removed.
Parameters	storyID The identifier (class name) of the story to be shown.
Notes	2006-01-27 (bsweeney@aaas.org) Modified to require only the story index

To Do

Update the addEvent script to handle IE memory leak problems.
Update the script to use a common code library. Some functions (addEvent, lib_bwcheck, etc) are common across a number of the scripts that have been written. Should these functions be consolidated in a CCL?
Fully check the code to make sure it appropriately degrades and won't affect older browsers (unless modified).
Modify the script so that the story headline in the story box does not scroll when the story does not fit in the box (the story itself should still scroll).
Add appropriate checks to ensure that no JS errors are encountered as the code runs. Add fallback if problems are encountered.

Notes

2006-05-17 (bsweeney@aaas.org)

Modified the stylesheet to add a box-sizing declaration for images adjusting the sizing to the content box. With the sizing set to border-box images have to be resized to fit any borders into the defined width, thus affecting their appearance on the page.

2006-02-27 (bsweeney@aaas.org)

Internet Explorer provides a height value for a DD even if the DD contains nothing but floated objects. This is counter-intuitive and likely a bug. For now I've modified the script to calculate image-holding DDs as if they contain floated images (the default style).

2006-01-27 (bsweeney@aaas.org)

Added two new global variables that affect how the ActiveMenu script operates. These variables required minor modification to the activeMenu_init() function: the event assigned to the headlines in the headline list now uses the activeMenu_strEvent variable for the event type; the active item is now set on page load using the index in the activeMenu_intActiveItem variable.
The activeMenu_init() function was modified to enable a more accurate calculation of the story box height. This functionality was moved to the bottom of the script after the rest of the menu intialization has been completed. The calculation is also only done if the activeMenu_bolResize2Fit variable is set to true.
The activeMenu_init() function was changed so that the initally viewable story is selected and made visible after the menu is fully initialized. This is done by calling the activeMenu_change() function and based on the value of the activeMenu_intActiveItem variable.
Modified the activeMenu_change() function so that it only requires a single parameter, the zero-based index of the story to highlight. Previously the function had to be passed the class associated with the story and the id associated with the headline, but since those values are set in script it was not really necessary as the index is sufficient to identify both.

2005-11-22 (bsweeney@aaas.org)

I needed to update the script with a more realistic height calculation for images in the story detail. The previous calculation would give too much height when the image was not square, causing the box to be too tall or too short when activeMenu_bolResize2Fit = true. To calculate the "area" occupied by the image more accurately I now calculate the height based on a line that bisects the image diagonally. Seems to give a more accurate height calculation.

2005-09-29 (bsweeney@aaas.org)

When IE6 is running in standards mode (vs quirks mode) the width calculation of a box gets a bit screwed up because IE6 doesn't take into account scrollbars while calculating the width of an object. This means that objects with a defined height and overflow: auto or overflow: scroll will end up wider than either a calculated or assigned width. I modified the script to account for this discrepency by subtracting what I estimated to be the approximate width of the scroll bars.

2005-09-20 (bsweeney@aaas.org)

I wrote the script with the principles of progressive enhancement in mind (see http://hesketh.com/publications/progressive_enhancement_paving_way_for_future.html). What this means is that the lowest-common-denominator browser can still use the page.
Attaching events in IE causes a memory leak. A large number of show/hide content could seriously degrade performance. Also, since the leak is persistent during a browser a session, a user visiting a number of pages that attach events would notice an affect on performance. There are ways to correct the problem, I've added it to the "to do" list.
A lot of assumptions are made of the structure of the activeMenu elements. It would be a good idea to confirm the structure as the script is running so that a non-conforming structure will cause the script to fall back to the original presentation by removing the applied classes and objects.
Related to the above, the script also doesn't check to make sure all JS objects are available such as populated arrays and such (some browsers do not support the push method for arrays). Confirmation should be made of their existence prior to acting on these objects.
It would be nice to be able to simplify the implementation, such as only needing to have the indicator class applied to the list itself. Considering the extra items used in the story list (header and update date) it may still be necessary to have some structural container elements.
It may be a good idea to add to the height check for automatic sizing a comparison to the headline list. Ideally the story box will be at least as tall as the list of headlines.
There can be a couple of possible issues with the menu (I say possible because the issues depend on the implementation and audience). One is that if a set height is used for the story box it is necessary to tailor the content to the height of the box to avoid the appearance of scroll bars. Second, if the height is set programatically the script is currently unable to fix the height if the user changes their font size using the browser.
When a page is rendered in standards mode IE6 doesn't take into account scrollbars while calculating the width of an object. This means that objects with a defined height and overflow: auto or overflow: scroll will end up wider than either a calculated or assigned width. The width discrepency is a problem because the presence of scrollbars modifies the working width of a box, which affects the layout of the box.

Taking this into consideration I found a flaw in Active Menu in IE6 standards mode. If no width is specified for the story box the area next to the floated headline list is calculated and used. If scrollbars are added to the story box it is widened and no longer fits in the area next to the float. As a result the story box gets pushed below the float.

I worked around the problem by modifying the width of the story box when the document.compatMode property indicated that the page was being rendered in standards mode (via PPK) in IE6. One drawback of this approach is that the width is no longer flexible in IE6, though I could maybe add a function to correct it onresize of the parent div. I should maybe also consider disabling this check if the user has set the width of the story box in via CSS.

I haven't tested in other versions of IE. I'm not sure if this is also a problem with height calculations, though that would likely cause few problems with the document layout.