Introduction
This article presents an improved method to display a definition for an abbreviation or initialism whenever the user hovers over the abbreviation or initialism.
Background
In an earlier CodeProject paper, Green Links - Acronyms and Initialisms exposed, one of the authors
(gggustafson) presented a method whereby a <span> tag with the class of "green_link" could be expanded into a new class that displays
a definition whenever the user hovered over the abbreviation.
There were a number of difficulties with the method:
- The syntax of the
<span> text was complicated, requiring a separator character be specified. If the separator was not specified,
an unexpected and probably undesired result would occur. - If the web page reader did not have JavaScript enabled, the ugly contents of the
<span> tag were displayed. - Both CSS and Javascript files were needed to be included in the HTML document.
- The
<body> tag required an onload attribute.
This revision addresses these issues and is backward compatible with the original method. It also supports two additional HTML tags.
Comparing the Original and the Revised Green Links
The original "Green Links" supported only a <span> tag of the form:
<span class="green_link">;Abbreviation;Definition</span>
This revision accepts <abbr> and <acromym> tags as well, using the forms:
<abbr class="green_link" title="Definition">Abbreviation</abbr>
<acronym class="green_link" title="Definition">Abbreviation</acronym>
In the <span> form of the green link, if a separator was missing, the resulting web page could take on an unwanted appearance.
By using the <abbr> and <acronym> tags, there is no separator. Thus, the tags are simplified. In addition, there is major
change in accessibility. If JavaScript is not enabled, the <abbr> and <acronym> tags display their contents "normally",
as if the class="green_link" attribute was not present on the tag.
Only one file (the JavaScript file) needs to be included in the revised Green Links. The JavaScript file dynamically creates the necessary
stylesheet so there is no need to include an external stylesheet file (CSS). If the GreenLinks.css file is included, it will be ignored by this revised method.
The JavaScript function that processes revise_green_links needs to be invoked through the onload attribute of the <body> tag, as in:
<body onload="initialize_green_links();">
This is no longer required. The JavaScript now contains a self-invoked function that parses the HTML page contents when the page is loaded.
The Workings of the Revised Green Links
The earlier Green Links was executed by invoking the initialize_green_links function through the <body> tag's onload attribute. In the new version,
this function may still be invoked in that manner; however, it is unnecessary. When the JavaScript file GreenLinks.js is included in the
HTML page, the following anonymous function is self-invoked upon page load.
( function ( )
{
initialize_green_links ( );
} ) ( );
This anonymous function was added so that the onload attribute of the <body> tag need not be supplied but may be supplied as in
earlier versions of Green Links. Thus the revised Green Links are fully backward compatible. Although the execution order is not insured
across all browsers, the anonymous function usually executes before the target of any <body> tag onload attribute. The anonymous
function invokes initialize_green_links.
function initialize_green_links ( )
{
var found = false;
if ( initialize_green_links_invoked )
{
found = true;
}
else
{
initialize_green_links_invoked = true;
green_links = new Array ( );
green_links = elements_by_class_name ( 'green_link',
document,
'abbr' ).concat (
elements_by_class_name ( 'green_link',
document,
'acronym' ).concat (
elements_by_class_name ( 'green_link',
document,
'span' ) ) );
if ( green_links.length <= 0 )
{
}
else
{
if ( DYNAMICALLY_CREATE_STYLESHEET )
{
create_green_links_stylesheet ( );
}
abbreviation_alone_rule =
green_links_rule_retrieved (
'.green_link_abbreviation_alone' );
if ( abbreviation_alone_rule == undefined )
{
}
else
{
abbreviation_definition_rule =
green_links_rule_retrieved (
'.green_link_abbreviation_definition' );
if ( abbreviation_definition_rule == undefined )
{
}
else if ( !initialize_green_link_action ( ) )
{
}
else if ( !revise_green_links ( ) )
{
}
else
{
abbreviation_alone_rule.style.display = 'none';
abbreviation_definition_rule.style.display = 'inline';
found = true;
}
}
}
}
return ( found );
}
Immediately upon its invocation, initialize_green_links tests the value of a global Boolean guard. If the guard is true,
initialize_green_links returns true (required if initialize_green_links was invoked
through the onload attribute of the <body> tag). If the guard value is not true,
initialize_green_links sets the global Boolean guard to true and:
- Collects all document tree nodes with a class of
green_link whose tag is <abbr>, <acronym>,
or <span>, in that order. - If any such nodes exist, creates the stylesheet that supports Green Links. The creation of the stylesheet can be inhibited by setting the
global variable
DYNAMICALLY_CREATE_STYLESHEET to false. In that case, the HTML page must the include the GreenLinks.css file. (GreenLinks.css
is included in the CSS directory of the download files.) - Finds the
.green_link_abbreviation_alone and .green_link_abbreviation_definition rules and saves them
in global variables. These two rules determine if Green Links are to be displayed. - If the two rules are found:
initialize_green_link_action is invoked to create and position the control that specifies whether or not Green Links are displayed.
It also establishes the event handlers to process the onscroll events for the window and the document.revise_green_links is invoked to process all of the earlier discovered Green Links in the document (i.e., <abbr>, <acronym>,
and <span>).- Assigns default values to the
.green_link_abbreviation_alone and .green_link_abbreviation_definition rules.
During the processing of Green Links, a new feature is added. Abbreviations and definitions are collected into a dictionary. This action occurs
for any of the following Green Links forms:
1 <abbr class="green_link"
title="Tactical Receive Equipment">TRE</abbr>
2 <abbr class="green_link">TRE</abbr>
3 <acronym class="green_link">TRE</acronym>
4 <acronym class="green_link"
title="Tactical Receive Equipment">TRE</acronym>
5 <span class="green_link">;TRE;Tactical Receive Equipment</span>
6 <span class="green_link">TRE;Tactical Receive Equipment</span>
7 <span class="green_link">;TRE</span>
8 <span class="green_link">TRE</span>
Note that once an abbreviation is defined, the definition is available to all other Green Link tags on the page. So, for example, line 1,
above, defines "TRE" for all following instances of Green Links appearing on the page (so too do lines 4, 5, and 6). This allows for
shortened Green Links in the page (e.g., lines 2, 3, 7, and 8). When a complete Green Link is encountered, all earlier Green Links with the
same abbreviation or initialism are accessed. If any of these Green Links are found to be incomplete, the incomplete Green Link will be replaced by the completely defined Green Link.
Using the Code
Unlike the original Green Links that had fours steps to obtain the Green Links effects, the revised Green Links requires only two.
- Include the JavaScript file in the HTML page. As mentioned in the earlier article, place the JavaScript include just before the
</body> tag:
<script type="text/javascript" src="./Scripts/GreenLinks.js"></script>
</body>
</html>
- Determine any abbreviation or initialisms that might benefit from the use of Green Links and wrap them in one of the Green Links forms:
<abbr class="green_link" title="Definition">Abbreviation or Initialism</abbr>
<acronym class="green_link" title="Definition">Abbreviation or Initialism</acronym>
<span class="green_link">;Abbreviation or Initialism;Definition</span>
Note that class="green_link" may cause the error "The class or CssClass value is not defined." This message is caused by the fact
that the class "green_link" will be defined in the dynamically created stylesheet. If you are uncomfortable with this message, a solution may be
to add the following to the <head> of the page.
<style type="text/css">
.green_link
{
}
</style>
Conclusion
This paper has presented a revised way in which to expand acronyms and initialisms to their definitions.
Browsers Tested
All of the browsers produced the expected results.
History
- 11/13/2011 - Original article.
