Basic Working Procedures > Creating Topic Files

Productivity Tip

You can get more powerful JavaScript popopups with the Help & Manual Premium Pack, which makes popups draggable and resizable and positions and sizes them automatically. See here for details.

JavaScript popups are used to display topics as popups in WebHelp and in HTML Help CHM files. They are the only way to display popups in the help in these two formats. If you don't activate JavaScript popups links to popup topics will display as normal topics in both these formats. HTML Help has native plain-text popups, but they are only used for field-level popups displayed as context help within applications.

Example:

Click here for a simple example of a JavaScript popup.

Advantages:

JavaScript popups create fully-formatted popups that can contain formatted text (bold, italic, different fonts etc.) and graphics. In HTML Help JavaScript popups are stored inside the main CHM help file so that you only need to distribute one file.

Limitations:

JavaScript popups cannot be used for field-level popups called from and displayed in applications. They can only be displayed within the help file. Also, activating JavaScript popups is a global setting for all the popup topics defined in your proejct.

Popups displayed in the help itself in HTML Help CHM files and WebHelp are only possible with JavaScript popups. This popup technology will work both in the CHM viewer and in all current browsers and should not cause problems with popup blockers. In addition to being blocker-transparent the popups are also activated by the user, which is explicitly permitted by most blockers.

1.In the Project Explorer select Configuration > Publishing Options > HTML Help/WebHelp > HTML Export Options. The options are shared by both formats.

2.Activate JavaScript popups at the bottom of the page, then click on Customize JavaScript Popups to configure your popups. See below for details.

3.Create your popup topic files in the Topic Files section, selecting Popup as the Topic Class. You can use all Help & Manual's formatting options, including tables, hyperlinks, formatted text, fonts, graphics, videos and animations. Just don't go overboard – if your popups are too large and contain too many features they will not be very useful!

4.Create normal topic links to your popup topics in your topics. The target topics will automatically be displayed as JavaScript popups when the user clicks on the links in the published help files.

JavaScript popups are fully configurable. Note that all the configuration options are global for the current project – you can only use one JavaScript popup configuration for all the popups in the project.

1.Activate JavaScript popups in Configuration > Publishing Options > HTML Help/WebHelp > HTML Export Options.

2.Click on Customize JavaScript Popups to display the configuration dialog:

DLG_JSPops_Config

Click/mouseover:	Displays the popup on user click or mouseover (i.e. as soon as the user moves the mouse pointer over the link). Be careful with using the mouseover option as many users find this intrusive and it may also trigger popup blockers in some browsers.
Border width:	Enter 0 for no border, any value above 0 (in pixels) to draw a border around the popup box.
Border padding:	The distance between the popup content and the border or edge of the popup (if there is no border) in pixels.
Background:	The background color of the popup box.
Border color:	The color of the border, if there is one.
Rounded borders and drop shadow:	These effects are only supported by modern browsers: Internet Explorer 9, Firefox 3.6, Opera 10.6, Google Chrome 10 or later.

Using JavaScript popups

Using JavaScript popups