| DESCRIPTION |
|---|
This tool is a set of one custom tag, CSS and Javascript files, which makes adding online help in a ColdFusion application as easy as just typing text. Any HTML object can be "Help enabled" by just adding an attribute with an identificator to the tag. Then an online help popup can be added anywhere in the page using a simple custom tag. The text inside the custom tag can contain any HTML codes.
When the mouse passes over an help enabled element, the cursor chages for the help cursor (
). The user just has to right click on the element to get an online pop up containing the information.
The popup is not a new window, but an absolute positioned table in the page, then its display is immediate.
All javascript code used in this tag is MSIE 5 and Netscape 6/Mozilla compatible. Other W3C compliant browsers might work but these are the one tested.
The online help system may be implemented in two ways:
Static help: This is the type described above. The help is always available, the user cannot turn it on or off. Note that help enabled elements can still use an onclick event, CF_onlineHelp preserve previous events defined on them.
User controlled type: In this mode, you provide some control device, like an image or a button, to allow the user to turn on or off the help system. When it is off, the cursor is not changed when the mouse passes over help enabled elements, and right clicking on them produces no action. With this type of help system, the user has a choice of two modes of operation:
Standard:This is the mode decribed above. It is intended to be used in normal operation.
Touring mode: In this mode, the popup opens immediately when the mouse enters the help enabled element, and closes when the the mouse leaves it. This mode is especially intended for a first glance at the application.
| NOTE |
|---|
If you find this custom tag useful, or if you have any suggestion to make it even more useful, just let me know, I'll be glad to enhance it.
| INSTALLATION |
|---|
In order to use this Custom Tag, just store the files OHLP_*.*, emulIE.js and onlineHelp.cfm found in the zip file in the root directory of your application. Do not use the special Custom Tags directory in your ColdFusion server. The tag must include the help manager javascript file and some icons, which must be in the scope of your HTTP server. Then it is more convenient to store both the tag and the javascript file in the root directory of the application, and let the custom tag find the relative path of the directory where it is, and load the Javascript and image files from there.
| SYNTAX |
|---|
Static type
<CF_onlineHelp ID="Identificator" TITLE="some text"> ......... HTML content of the help page ................. </CF_onlineHelp>If the current page is not in the root directory, say one sub-directory below, you must use the CFMODULE tag instead, ie:
<CFMODULE TEMPLATE="../onlineHelp.cfm" ID="Identificator" TITLE="some text"> ......... HTML content of the help page ................. </CFMODULE>
User controlled type
In addition of help content defined as shown above, you just have to supply some control device somewhere in the page, and give it an onclick event to call the function toggleHelp, and a help ID attribute like above.Example:
<IMG SRC="../HLP_help.gif" WIDTH="22" HEIGHT="22" BORDER="0" ALT="" ALIGN="absMiddle" onclick="toggleHelp(this)" help="helpControl">The help ID must be "helpControl", it is used to provide help for the help system itself. This help is automatically added by the the first call to the tag, and it contains two radio buttons allowing the user to switch between Standard and Touring modes. You may modify the text in the file onlineHelp.cfm to better suit your needs.
| EXAMPLES |
|---|
Static help system
User Controlled help system
| CUSTOMIZING THE TAG |
|---|
Two files may be edited to customize the tag for your application.
1. onlineHelp.cfm: Just edit the text in the CF_onlineHelp tag in the middle of the file.
2. OHLP_Styles.css: Adjust the styles with your own fonts, colors, etc.