Using FrontPage to Create Glossary Popups

Topic status automatically displays here - do not remove.

Bookmark me! Bookmark this topic Print me! Print this topic

This topic describes how to use FrontPage to create a HTML Help popup within a topic which will display a glossary definition by clicking on a customized link.

Note Note

You can always go into the HTML view and edit these items directly, however, this topic attempts to describe how to achieve the same results using the WYSIWYNG Normal view as much as is possible, and particularly to minimize the need to edit the HTML code directly.

Important

The following procedures must be followed exactly, or the results will be unpredictable.

How to use FrontPage to create glossary popups

The glossary popup in HTML Help is created and controlled by the HTML Help ActiveX Control which ships with HTML Help Workshop. The details for manually installing this control are included below for completeness, however, proved to be so convoluted to implement and liable to corruption, that it was decided to simplify the matter by using the project script file to automatically install and setup this glossary control dynamically as each page is displayed. This means that you don't have to become involved with this control at all, nor be concerned about it's placement, identification, or settings. No user input = no errors!

Warning Warning

Do NOT manually install the HTML Help ActiveX Control into any Help topic that is linked to the Lotech Solutions.js script file. Every topic in the HTML Help should already be linked appropriately. You can easily determine if the topic is linked as it will contain the line:

<script language="JavaScript" src ="../../Lotech Solutions.js" ></script>

... in the head section (between the <HEAD> and </HEAD> tags) of the topic when viewed in HTML view. Leave this link alone and do NOT manually install the HTML Help ActiveX Control into your topic.

For those that are really interested in the manual insertion procedure for their technical education, click this link: Show how ...

The HTML Help ActiveX Control object is used to display the glossary definition in a popup window, so one must be added to the topic. Show how ...
To manually insert the Glossary object in a topic

This procedure manually inserts the HTML Help ActiveX Control object into the topic, and customises it to display glossary definitions in a popup window over the popup link.

Important

You don't have to become involved with this control at all, because the project script file automatically installs and sets up this glossary control dynamically as each page is displayed in the HTML help.

Warning

Do NOT manually install the HTML Help ActiveX Control into any Help topic that is linked to the Lotech Solutions.js script file.
1. Open the topic (which will display the popup glossary definition) and scroll to the bottom of the page.
2. Position the cursor below the copyright notice in the topic.
  If the index object already exists there, place the cursor after that object. They can both coexist side-by-side within the same paragraph.
  
  If you swap to HTML view, the cursor should be positioned before the </body> tag. Swap back to Normal view to continue.
3. From the Insert menu, select Advanced | ActiveX Control.
  This displays the Insert ActiveX Control dialog.
4. Select HHCtrl Object.
  Note
  
  If the HHCtrl Object does not display within the list, you will need to add the control to the list. Show how ...
  To add an ActiveX object to the FrontPage ActiveX Control list
  1. From the Insert ActiveX Control dialog, click the Customize... button.
    This displays the Customize ActiveX Control dialog.
  2. Scroll down the list and check the HHCtrl Object item.
    Note
    
    If the HHCtrl Object does not display even within this list, you're stuffed. It does not exist on your machine, so abandon this procedure. You will need to copy the control from another topic in which it already exists. Then continue with the procedure titled To create the display link.
  3. Click OK.
  4. Back in the Insert ActiveX Control dialog, select HHCtrl Object.
5. Click OK.
This inserts the Glossary ActiveX Control at the insertion point. In Normal view, it will look like a big box with black square or the ActiveX symbol on it.
The glossary ActiveX Control object needs to be customized for our purposes. Show how ...
To manually customize the Glossary object for our purposes
1. Right-click on the control, and select ActiveX Control Properties.
2. In the Name: field on the Object Tag tab, replace the default name "HHCtrl1" with the word "Glossary" without the quotes. Note the capital G.
3. Alter the Width: and Height: fields to the value of "10" without the quotes.
4. Click the Style button.
5. In the ID: field, type the word "Glossary" without the quotes. Note the capital G.
6. Click OK.
7. Select the Parameters tab, click on the first parameter in the list then click the Remove button three times.
  Yes this purposely removes all three default parameters. If not removed, they will cause an error at runtime.
  
  Caution
  
  If you open the properties dialog at any later time, these defaults will be reinstated and break the glossary functionality!
  So they will then have to be manually removed again!
8. Click OK.
The glossary definition needs to be created in the Glossary file. Show how ...
To create a definition in the Glossary file
1. Open the Glossary.htm file (located in the References folder), and create the glossary entry in the structure:
  
  Term (must be between DT tags)
  
  Definition (must be between DD tags)
  
  For example:
  
  glossary
  
  An alphabetically sorted collection of terms (used in this documentation) and their definitions.
  
  Note
  
  Ensure that you haven't inadvertently inserted <P> tags into the <DT> and <DD> tags. This will cause formatting display problems with the Definition List. To check that you haven't corrupted the list, turn on tag visibility.
  
  Tip
  
  To toggle tag visibility when viewing from the Normal tab, press the keyboard shortcut CTRL + /.
2. Save and close the Glossary file.
The link which displays the popup when clicked must be created in the topic. Show how ...
To create the glossary popup link in the topic

This procedure assumes that you are linking to an existing glossary entry. If the one you want to link to does not exist, you will have to create it. See how to create a glossary entry.
1. From Normal view in the topic you want the glossary popup to display above, select the text to become the link.
  Note
  
  The popup link text should be the exact same as the "Term" of the glossary entry.
2. From the Insert menu, select Hyperlink.
  Tip
  
  The keyboard shortcut for inserting a hyperlink is CTRL + K.
1. In the URL: field, replace the default "http://" with the text "JavaScript:ShowGlossary('Term')" without the double quotes, where the word "Term" within the brackets must be the name of the glossary term to be displayed.
  Note
  
  No other text will work. Case IS sensitive. The URL must contain the string "JavaScript:ShowGlossary" with no spaces, then the name of the glossary term enclosed within single quotes and again within brackets. No other combination will work. The inclusion of any spaces will cause this to fail.
2. Click the Style button.
3. In the Class: field, type the word "GlossLink" without the double quotes. Case insensitive.
4. Click OK.
5. Click OK.
6. Save the file.
Test the operation of the link by clicking the Preview in Browser button, and clicking on the link.
Tip

The keyboard shortcut for "Preview in Browser" is CTRL + SHIFT + B.

Note

You cannot test the operation of the link by swapping to Preview view and clicking on the link, because FrontPage renames and stores its open files in a temporary directory, subsequently breaking the link to the glossary file and failing the retrieval of the glossary definition. You must view the topic in IE, or in the compiled HTML help to test the link properly.

Using FrontPage to Create Glossary Popups

See Also