Welcome

.. to CHM examples!

HTMLHelp is the current help system for Microsoft Windows. This file includes some examples how to use Microsoft HTMLHelp and is used to show how to work with HTMLHelp 1.x CHM files in Visual Basic Applications.

This "Welcome" page is the default page of the compiled help module (CHM).

Version Information:

Release: 2005-07-17

(c) help-info.de

back to top ...


Context sensitive help topic 10000

This topic is only used to show context sensitive help with Visual Basic applications. This is contextID 10000.

Open your project (.hhp) file in notepad and add following sections:

[MAP]

Add a [MAP] section and define the IDs your require.

#define IDH_frmMainControl1 10000
#define IDH_frmMainControl2 10010
#define IDH_frmChildControl1 20000
#define IDH_frmChildControl2 20010

[ALIAS]

Add an [ALIAS] section and define the mapping between each ID and a help topic.

[ALIAS]
IDH_frmMainControl1=Context-sensitive example\contextID-10000.htm
IDH_frmMainControl2=Context-sensitive example\contextID-10010.htm
IDH_frmChildControl1=Context-sensitive example\contextID-20000.htm
IDH_frmChildControl2=Context-sensitive example\contextID-20010.htm

Alternatively you can do this:

In a text editor enter the ALIAS details like IDH_90000=index.htm. Save the file as 'alias.h' in same folder as your help project file.

;---------------------------------------------------
; alias.h file example for HTMLHelp (CHM)
; www.help-info.de
;
; All IDH's > 10000 for better format
; last edited: 2006-07-09
;---------------------------------------------------
IDH_90000=index.htm
IDH_10000=Context-sensitive_example\contextID-10000.htm
IDH_10010=Context-sensitive_example\contextID-10010.htm
IDH_20000=Context-sensitive_example\contextID-20000.htm
IDH_20010=Context-sensitive_example\contextID-20010.htm

In a text editor enter the MAP details like #define IDH_90000 90000;frmMain. Save the file as 'map.h' in same folder as your help project file.

;--------------------------------------------------
; map.h file example for HTMLHelp (CHM)
; www.help-info.de
;
; All IDH's > 10000 for better format
; ;comment at end of line
;--------------------------------------------------
#define IDH_90000 90000;frmMain
#define IDH_10000 10000;frmAddressDataContextID-1
#define IDH_10010 10010;frmAddressDataContextID-2
#define IDH_20000 20000;frmAddressDataContextID-3
#define IDH_20010 20010;frmAddressDataContextID-4

Open your .hhp file in a text editor and add these sections

[ALIAS]
#include alias.h

[MAP]
#include map.h

Recompile your .HHP file. Now your application can call help using context help ID's instead of topic file names.


Context sensitive help topic 10010

This topic is only used to show context sensitive help with Visual Basic applications. This is contextID 10010.

Open your project (.hhp) file in notepad and add following sections:

[MAP]

Add a [MAP] section and define the IDs your require.

#define IDH_frmMainControl1 10000
#define IDH_frmMainControl2 10010
#define IDH_frmChildControl1 20000
#define IDH_frmChildControl2 20010

[ALIAS]

Add an [ALIAS] section and define the mapping between each ID and a help topic.

[ALIAS]
IDH_frmMainControl1=Context-sensitive example\contextID-10000.htm
IDH_frmMainControl2=Context-sensitive example\contextID-10010.htm
IDH_frmChildControl1=Context-sensitive example\contextID-20000.htm
IDH_frmChildControl2=Context-sensitive example\contextID-20010.htm

Alternatively you can do this:

In a text editor enter the ALIAS details like IDH_90000=index.htm. Save the file as 'alias.h' in same folder as your help project file.

;---------------------------------------------------
; alias.h file example for HTMLHelp (CHM)
; www.help-info.de
;
; All IDH's > 10000 for better format
; last edited: 2006-07-09
;---------------------------------------------------
IDH_90000=index.htm
IDH_10000=Context-sensitive_example\contextID-10000.htm
IDH_10010=Context-sensitive_example\contextID-10010.htm
IDH_20000=Context-sensitive_example\contextID-20000.htm
IDH_20010=Context-sensitive_example\contextID-20010.htm

In a text editor enter the MAP details like #define IDH_90000 90000;frmMain. Save the file as 'map.h' in same folder as your help project file.

;--------------------------------------------------
; map.h file example for HTMLHelp (CHM)
; www.help-info.de
;
; All IDH's > 10000 for better format
; ;comment at end of line
;--------------------------------------------------
#define IDH_90000 90000;frmMain
#define IDH_10000 10000;frmAddressDataContextID-1
#define IDH_10010 10010;frmAddressDataContextID-2
#define IDH_20000 20000;frmAddressDataContextID-3
#define IDH_20010 20010;frmAddressDataContextID-4

Open your .hhp file in a text editor and add these sections

[ALIAS]
#include alias.h

[MAP]
#include map.h

Recompile your .HHP file. Now your application can call help using context help ID's instead of topic file names.


Context sensitive help topic 20000

This topic is only used to show context sensitive help with Visual Basic applications. This is contextID 20000.

Open your project (.hhp) file in notepad and add following sections:

[MAP]

Add a [MAP] section and define the IDs your require.

#define IDH_frmMainControl1 10000
#define IDH_frmMainControl2 10010
#define IDH_frmChildControl1 20000
#define IDH_frmChildControl2 20010

[ALIAS]

Add an [ALIAS] section and define the mapping between each ID and a help topic.

[ALIAS]
IDH_frmMainControl1=Context-sensitive example\contextID-10000.htm
IDH_frmMainControl2=Context-sensitive example\contextID-10010.htm
IDH_frmChildControl1=Context-sensitive example\contextID-20000.htm
IDH_frmChildControl2=Context-sensitive example\contextID-20010.htm

Alternatively you can do this:

In a text editor enter the ALIAS details like IDH_90000=index.htm. Save the file as 'alias.h' in same folder as your help project file.

;---------------------------------------------------
; alias.h file example for HTMLHelp (CHM)
; www.help-info.de
;
; All IDH's > 10000 for better format
; last edited: 2006-07-09
;---------------------------------------------------
IDH_90000=index.htm
IDH_10000=Context-sensitive_example\contextID-10000.htm
IDH_10010=Context-sensitive_example\contextID-10010.htm
IDH_20000=Context-sensitive_example\contextID-20000.htm
IDH_20010=Context-sensitive_example\contextID-20010.htm

In a text editor enter the MAP details like #define IDH_90000 90000;frmMain. Save the file as 'map.h' in same folder as your help project file.

;--------------------------------------------------
; map.h file example for HTMLHelp (CHM)
; www.help-info.de
;
; All IDH's > 10000 for better format
; ;comment at end of line
;--------------------------------------------------
#define IDH_90000 90000;frmMain
#define IDH_10000 10000;frmAddressDataContextID-1
#define IDH_10010 10010;frmAddressDataContextID-2
#define IDH_20000 20000;frmAddressDataContextID-3
#define IDH_20010 20010;frmAddressDataContextID-4

Open your .hhp file in a text editor and add these sections

[ALIAS]
#include alias.h

[MAP]
#include map.h

Recompile your .HHP file. Now your application can call help using context help ID's instead of topic file names.


Context sensitive help topic 20010

This topic is only used to show context sensitive help with Visual Basic applications. This is contextID 20010.

Open your project (.hhp) file in notepad and add following sections:

[MAP]

Add a [MAP] section and define the IDs your require.

#define IDH_frmMainControl1 10000
#define IDH_frmMainControl2 10010
#define IDH_frmChildControl1 20000
#define IDH_frmChildControl2 20010

[ALIAS]

Add an [ALIAS] section and define the mapping between each ID and a help topic.

[ALIAS]
IDH_frmMainControl1=Context-sensitive example\contextID-10000.htm
IDH_frmMainControl2=Context-sensitive example\contextID-10010.htm
IDH_frmChildControl1=Context-sensitive example\contextID-20000.htm
IDH_frmChildControl2=Context-sensitive example\contextID-20010.htm

Alternatively you can do this:

In a text editor enter the ALIAS details like IDH_90000=index.htm. Save the file as 'alias.h' in same folder as your help project file.

;---------------------------------------------------
; alias.h file example for HTMLHelp (CHM)
; www.help-info.de
;
; All IDH's > 10000 for better format
; last edited: 2006-07-09
;---------------------------------------------------
IDH_90000=index.htm
IDH_10000=Context-sensitive_example\contextID-10000.htm
IDH_10010=Context-sensitive_example\contextID-10010.htm
IDH_20000=Context-sensitive_example\contextID-20000.htm
IDH_20010=Context-sensitive_example\contextID-20010.htm

In a text editor enter the MAP details like #define IDH_90000 90000;frmMain. Save the file as 'map.h' in same folder as your help project file.

;--------------------------------------------------
; map.h file example for HTMLHelp (CHM)
; www.help-info.de
;
; All IDH's > 10000 for better format
; ;comment at end of line
;--------------------------------------------------
#define IDH_90000 90000;frmMain
#define IDH_10000 10000;frmAddressDataContextID-1
#define IDH_10010 10010;frmAddressDataContextID-2
#define IDH_20000 20000;frmAddressDataContextID-3
#define IDH_20010 20010;frmAddressDataContextID-4

Open your .hhp file in a text editor and add these sections

[ALIAS]
#include alias.h

[MAP]
#include map.h

Recompile your .HHP file. Now your application can call help using context help ID's instead of topic file names.


Garden

Own Garden

It is nice to have a garden near your home.

You can plant trees of one's own, lay out a pond with fish and cultivate flowers. For the children a game lawn can be laid out. You can learn much about botany.

A garden is good for your health and you can relax at the gardening.


Flowers

You can cultivate flowers in your garden. It is beautiful if one can give his wife a bunch of self-cultivated flowers.


How one grows trees

You must dig a big hole first.

Wonder well which kind of tree you want to plant.

(oak, beech, alder)

The tree planted newly has always to be watered with sufficient water.


Attention (!) - Close Window automatically

go to home ...

Close Window automatically

One can close HTML Help window without getting a click from user by the following code. Use "Close" ActiveX Control and Javascript as shown below.

Code

<OBJECT id=hhctrl type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
codebase="hhctrl.ocx#Version=5,2,3790,233">
<PARAM name="Command" value="Close">
</OBJECT>
<script type="text/javascript" language="JavaScript">
<!--
window.setTimeout('hhctrl.Click();',1000);
// -->
</script>


Topic split example

Split example - Main Topic 1

It's possible to have one mega HTML file splitting into several files by using a HHCTRL.OCX split file object tag in your HTML. This instructs the HTML Help compiler to split the HTML file at the specific points where it finds this tag. The object tag has the following format:

  <object type="application/x-oleobject"
     classid="clsid:1e2a7bd0-dab9-11d0-b93a-00c04fc99f9
     <param name="New HTML file" value="a_new_file.htm">       e.g "topic-04.htm"
     <param name="New HTML title" value="My new topic title">  e.g. "Topic 4"
  </object>

The first value - "file" - specifies the name you want to give to the file that would be created for this topic. The second value - "title" - specifies what you would want in the <TITLE> tag for the document. You shouldn't change any details apart from the value parameter.

The file then gets created within the .chm file at compile time, though you'll never see it on disk. A pretty neat feature.

The trick of course is that if you have links in your .chm file, whether from the contents/index or from topic to topic, you'll need to reference the file name that you specify in the tag above.

If you are using HTML Help Workshop, you can use the Split File command on the Edit menu to insert the <object> tags.

The following hyperlink displays a topic file in popup-type window:

Link from this main to topic 4 (only working in the compiled help CHM and for a locally saved CHM)

<a href="#"
 onClick="window.open('topic-04.htm','Sample',
 'toolbar=no,width=200,height=200,left=500,top=400,
 status=no,scrollbars=no,resize=no');return false">
 Link from this main to topic 4</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Using CHM shortcut links

This is a simple example how to use shortcut links from a CHM file and jump to a URL with the users default browser.

Example:

Click me to go to www-help-info.de

Note:

  • Wont work on the web
  • Only works in compressed CHM file.
  • Dosn't work with "Open dialog". You have to save to local disc.
  • MyUniqueID must be a unique name for each shortcut you create in a HTML file.

Put this code in your <head> section:

<OBJECT id=MyUniqueID type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="ShortCut">
<PARAM name="Item1" value=",http://www.help-info.de/index_e.htm,">
</OBJECT>

Put this code in your <body> section:

<p><a href="javascript:MyUniqueID.Click()">Click me to go to www-help-info.de</a></p>


How to jump to a anchor

This topic shows how to jump to bookmarks in your HTML code like:

<a name="AnchorSample" id="AnchorSample"></a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

AnchorSample InnerText Headline

1. Example for use with Visual Basic 2003

This topic is used to show providing help for controls with a single HTML file downloaded from a server (if internet connection is available) and jump to 'AnchorSample'.

2. Example for use with Compiled Help Module (CHM)

This topic is used to show how to jump to bookmarks AnchorSample.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Sample headline after anchor 'SecondAnchor'

Here is coded:

<a name="SecondAnchor" id="SecondAnchor"></a>

Example for use with Compiled Help Module (CHM)

This topic is used to show how to jump to bookmarks SecondAnchor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


How to create PopUp

PopUp Example

The following PopUp feature dosn't work for all browsers/browser versions. Have a look at your systems security updates.

Click here to see a text PopUp example information.

<p>
    <a class=popupspot href="JavaScript:hhctrl.TextPopup
    ('This is a standard HTMLHelp text-only popup.\n
     The flowers below are\n
     -nice\n
     -yellow\n
     -beautiful','Arial,8',10,10,00000000,0xffffff)">
      Click here to see a text PopUp example information.
    </a>
</p>

Another solution:

How to break your PopUp defintion into multiple lines:

<head>
..
<script type="text/javascript">
AppDescription = "This is the beginning" +
        " of a long text definition" +
        " that is broken into multiple lines" +
        " in the javascript."
</script>
</head>
<p> <a href="javascript:hhctrl.TextPopup
(AppDescription,'Arial,8',10,10,00000000,0xffffff)">
How to break your PopUp defintion into multiple lines:
</a>
</p

Click here to change the background color of your text PopUp.

This is the code for the text link above:

<p>
<a class=popupspot
href="JavaScript:hhctrl.TextPopup
('This is a standard HTMLHelp text-only popup.
  See the nice flowers below.','Verdana,8',10,10,00000000,0x66ffff)">
  Click here to change the background color of your text PopUp.</a>
</p>

To change the flower picture hoover with your mouse pointer!

This is the code to change the flower picture above:

<p>
<img
 onmouseover="(src='../images/wintertree.jpg')"
 onmouseout="(src='../images/insekt.jpg')"
 src="../images/insekt.jpg" alt="" border="0">
</p>

Another example to enlarge a screenshot (hoover with mouse pointer):

See what happens ..

To enlarge the screenshot hoover with your mouse pointer!

This is the code to enlarge the screenshot (hoover):

<p>
 <img
 src="../images/screenshot_small.png" alt="" border="0"
 onmouseover="(src='../images/screenshot_big.png')"
 onmouseout="(src='../images/screenshot_small.png')">
</p>

Another example to enlarge a screenshot:

To enlarge the screenshot click to screenshot!

This is the code to enlarge the screenshot (click):

<p>
 <img src="../images/screenshot_small.png" alt=""
 onclick="this.src='../images/screenshot_big.png'" />
</p>


Ohne_Titel_1

Christmas!


Linking from CHM with standard HTML

This is a simple sample how to link from a compiled CHM to HTML files. Some files are on a web server some are local and relative to the CHM file.

  • How to link relative
  • How to link to a topic in another CHM file
  • How to link to HTML pages on the web

How to link relative to a HTML file that isn't compiled into the CHM

The following technique of linking is useful if one permanently must update some files on the PC of the customer without compiling the CHM again. The external file must reside in the CHM folder or a subfolder.

Link relative to a external HTML file (external_files/external_topic.htm)

Link code:

<p>
<SCRIPT Language="JScript">
function parser(fn) {
 var X, Y, sl, a, ra, link;
 ra = /:/;
 a = location.href.search(ra);
 if (a == 2)
  X = 14;
 else
  X = 7;
  sl = "\\";
  Y = location.href.lastIndexOf(sl) + 1;
  link = 'file:///' + location.href.substring(X, Y) + fn;
  location.href = link;
 }
</SCRIPT>
</p>

<p>
  <a onclick="parser('./external_files/external_topic.htm')"
  style="text-decoration: underline;
  color: green; cursor: hand">Link relative to a external HTML file (external_files/external_topic.htm)</a>
</p>

How to link to a topic in another CHM file

Link to topic

Problem: When the user clicks an ms-its jump that includes a target in another CHM file, the topic appears at the correct target location, but the css styles are not applied and the graphics do not appear. Clicking refresh loads the graphics and styles.
Here's an example jump:
<A href="ms-its:filename.chm::html/TroubleShooting.htm#checklist">

You can work around the css problem by referencing the css in the <head> section of the HTML file using the ms-its protocol but that doesn't fix the graphic issue.
The solution is to replace "ms-its:" with the older "mk:@MSITStore:" scheme.

How to link to HTML pages on the web

In the past, energy was won with windmills in Germany. Windmill, Germany - Ditzum

See more information about mills (click the link).

Modern information (link): http://en.wikipedia.org/wiki/Wind_turbine

Modern information (link - with bookmark): http://en.wikipedia.org/wiki/Wind_turbine#History

Modern information (link - in new window): http://en.wikipedia.org/wiki/Wind_turbine


Linking to PDF from CHM

Linking to PDF or from a CHM topic

This topic is used for linking from a compiled CHM topic to other files only. Open/Save dialog is used.

PDF

Link relative to PDF

<p><a href="../embedded_files/example-embedded.pdf">Link relative to PDF</a></p>

Make sure to add your *.PDF file to the [FILES] section of the **.HHP file like this:

..
[FILES]
design.css
index.htm
embedded_files\example_embedded.pdf
..

DOC

Link relative to DOC

<p><a href="../embedded_files/example-embedded.doc">Link relative to DOC</a></p>

Make sure to add your *.DOC file to the [FILES] section of the **.HHP file like this:

..
[FILES]
design.css
index.htm
embedded_files\example_embedded.doc
..


;-------------------------------------------------
; topic.txt file example for HTMLHelp (CHM)
; www.help-info.de
;
;
; This is a file including the ID and PopUp text
;-------------------------------------------------
.topic 900;nohelp
Sorry, no help available!

.topic 100;PopUp_AddressData_btnOK
This is context sensitive help text for a button (ID: IDH_100).

.topic 110;PopUp_AddressData_txtFirstName
This is context sensitive help text for a text box (ID: IDH_110).

.topic 120;PopUp_AddressData_txtLastName
This is context sensitive help text for a text box (ID: IDH_120).


External Topic

This is a external topic that resides relativ to the CHM files and isn't compiled into the CHM file. Here it's used to show how to link to external files in a CHM topic window.

Delete links in all HTML files of your project - otherwise the external file is compiled to the CHM file.

Make a copy of the external file and delete the file in your project structure before the last compile runs. So the file isn't compiled into the CHM file. But you have to install the external file on the customers PC.

To try this example you must download the complete project example to a local folder, delete all files excepting "CHM-example.chm" and folder "external_files".

Edit following date in the external HTML file "external_topic.htm" to check that you can update the HTML file without recompiling the CHM file:

2005-05-17


Topic 2

To do so insert following code to the HTML file at this place:

  <object type="application/x-oleobject"
     classid="clsid:1e2a7bd0-dab9-11d0-b93a-00c04fc99f9
     <param name="New HTML file" value="topic-02.htm">
     <param name="New HTML title" value="Topic 2">
  </object>

Split example - Topic 2

This example is used to show how the SPLIT function is working for generating sub-topics from one HTML file to the table of contents. This is the topic 2 of one HTML file.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Topic 3

To do so insert following code to the HTML file at this place:

  <object type="application/x-oleobject"
     classid="clsid:1e2a7bd0-dab9-11d0-b93a-00c04fc99f9
     <param name="New HTML file" value="topic-03.htm">
     <param name="New HTML title" value="Topic 3">
  </object>

Split example - Topic 3

This example is used to show how the SPLIT function is working for generating sub-topics from one HTML file to the table of contents. This is the topic 3 of one HTML file.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Topic 4

Split example - Topic 4

This is a short example text for Topic 4 for a small pop-up window.

See link at Topic 1.


Using window.open

This is a simple example how to use the "window.open" command

Click here to open a HTML file

Neues Fenster

<script type="text/javascript">
function NeuFenster () {
MeinFenster = window.open("datei2.htm", "Zweitfenster",
  "width=300,height=200,scrollbars");
MeinFenster.focus();
}
</script>

Put this code in your <body> section:

<A HREF= "#" onClick="window.open('/external_files/external.htm',
'Window Open Sample','toolbar=no,width=850,height=630,left=300,top=200,
status=no,scrollbars=no,resize=no');return false"> Click here to open a HTML file</A>