Basic Working Procedures > Creating Topic Files

JavaScript popups make it possible to create popups in Webhelp and in HTML Help you can use them as an alternative to HTML Help's own native plain-text popups.

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.), graphics, hyperlinks (both topic and Internet links) and even video and animation files. In addition to this they also support a range of cool graphical effects and transitions (fade-in, transparency etc.) that are displayed in both HTML Help and Webhelp. (In Webhelp these effects are only displayed by Internet Explorer 5.5 and later.) In HTML Help JavaScript popups are stored in the main 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 in your Invisible Topics section.

You can use JavaScript popups as an alternative to HTML Help's limited plain-text popups. This gives you fully-formatted popups with support for hyperlinks, graphics and even videos.

When you use this popup mode you cannot use the same project for your field-level popups called by your application.

1.	In the Project Explorer select Configuration > Publishing Options > HTML Help and click on Popup Topics.

2.	Select JavaScript Popups, then click on Customize JavaScript Popups to configure your popups. See below for details.

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. When you compile to HTML Help the target topics will automatically be displayed as JavaScript popups.

Using JavaScript popups in Webhelp

Popups in Webhelp are only possible with JavaScript popups. This popup technology will work 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 > Webhelp and click on Popup Topics.

2.	Select JavaScript Popups, then click on Customize JavaScript Popups to configure your popups. See below for details.

4.	Create normal topic links to your popup topics in your topics. When you compile to Webhelp the target topics will automatically be displayed as JavaScript popups.

Configuring JavaScript popup options

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. However, you can store separate JavaScript popup configurations for HTML Help and Webhelp.

1.	Select the JavaScript Popups option for HTML Help or Webhelp in .Configuration > Publishing Options.

2.	Click on Customize JavaScript Popups to display the configuration dialog. This dialog is exactly the same for both HTML Help and Webhelp:

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.
Minimum width:	Setting this to 0 makes the popup width automatic, on the basis of the amount of text and/or other content. Setting it to any other value (in pixels) explicitly defines the width of the popup. If the popup only contains text it will have the width you specify. If it contains other content (graphics, videos) it will be at least as wide as the specified width and wider if required by the content.
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.
Visual effects:	These effects are only supported by MS Internet Explorer. This means that they are available in HTML Help (which uses MSIE) and in Webhelp when the user is using Internet Explorer. They are ignored by all other browsers. These effects are easier to see than to describe. Experiment! (Note that the transition effects are only for opening the popup box. The popups always close in the same way, no matter what effect you select.)