Basic Working Procedures > Creating and Editing Topics

In this topic:

JavaScript popups are a new technology introduced in Help & Manual 4. They make it possible to create popups in Browser-based Help (this was not supported in Help & Manual 3 and earlier), and in HTML Help you can use them as an third popup alternative, in addition to HTML Help's own native plain-text popups and Help & Manual 4's dual-mode popups in which the popups are stored in an external Winhelp Note that Windows Vista does not support Winhelp. If you want to be compatible with Vista you must transition to a different help format. .HLP file.

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 Browser-based Help. (In Browser-based Help 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 context-sensitive 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. If you use JavaScript popups you cannot create formatted context-sensitive popups in the same HTML Help project – you must then create a second Winhelp project for your formatted context-sensitive popups.

Using JavaScript popups in HTML Help:

You can use JavaScript popups as a second alternative to HTML Help's very limited plain-text popups. This gives you fully-formatted popups with support for hyperlinks, graphics and even videos. However, when you use this popup mode you cannot use the same project for your context-sensitive popups called by your application. See Formatted context popups in HTML Help for details.

1.	Go to Project > Project Properties > HTML Help > Popup Topics and select JavaScript Popups.

2.	Click on to configure your popups. See below for details. (The JS popups settings for HTML Help are saved separately.)

Create your popup topics in the Invisible Topics section. 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 Browser-based Help:

Popups in Browser-based Help are only possible with JavaScript popups. The JavaScript code has been thoroughly tested and should work transparently with all major current browsers. (Netscape 4 and earlier are not supported and will not ever be supported, however!)

This popup technology should also 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.	Go to Project > Project Properties > Browser-based Help > Popup Topics and select JavaScript Popups.

2.	Click on to configure your popups. See below for details. (The JS popup settings for Browser-based Help are saved separately.)

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

Configuring JS popup options:

JavaScript popups are highly-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 Browser-based Help.

1.	HTML Help: Go to Project > Project Properties > HTML Help > Popup Topics and select JavaScript Popups. Browser-based Help: Go to Project > Project Properties > Browser-based Help > Popup Topics and select JavaScript Popups.

2.	Click on to display the configuration dialog. This dialog is exactly the same for both HTML Help and Browser-based Help:

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 Browser-based Help 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.)