or… How to Mimic a .chm File on a Website

Most people are familiar with the typical help window used in windows applications. However, most people may not know how to create web-based help for a website. The following example and instructions will allow you to mimic this type of functionality using a pop-up on a website.

To see the full example: Open the help window

or you can download all the files as a zip file.

The Summary:

This implementation uses all basic HTML and JavaScript. The main file (index.html) uses a link to open a pop-up window (help.html) which contains one <table> with two <td> cells. The left cell has a collapsible tree that is built using an unordered list which has JavaScript <a> links. The right cell has only an <iframe> that will have its src attribute set to different files based on which link in the tree is clicked. Each help section has its own HTML file and each of these files can have many topics.



The Details:

index.html

This main file just shows how to make a link to open a pop-up window with our desired window style.


<a href=”#” onclick=”OpenHelp()”>Help</a>
<script type=”text/javascript”> function OpenHelp() { window.open(“help.html”,“Help”, “height=540,width=820,status=no,toolbar=no,menubar=no, location=no”); }</script>

help.html

This is the file which defines the tree layout for the groups, subgroups and links.

The links in each <li> use JavaScript so that it is possible to move to a specific topic in any help file.

The first parameter is the exact name of the help file and the second parameter is the specific topic to scroll to.

<div style=”overflow:auto; height:500px; width:270px;“> <ul class=”aqtree3clickable”> <!– FIRST TYPE OF LINK –>
<li><a href=”javascript:LoadPage(‘NoSubTopics’);”>No Sub Topics</a></li>
<!– SECOND TYPE OF LINK –> <li><a href=”#”> </a><span onclick=”javascript:LoadPage(‘WithSubTopics’);” class=”clickable”>With Sub Topics</span> <ul> <li><a href=”javascript:LoadPage(‘NestedTopics’, ‘First’);”>First Topic</a></li> <li><a href=”javascript:LoadPage(‘NestedTopics’, ‘Second’);”>Second Topic</a></li> <li><a href=”javascript:LoadPage(‘NestedTopics’, ‘Third’);”>Third Topic</a></li>  

</ul>

</li>

 

A few more notes about things going on in here:

The main <div> with style=”overflow:auto;will make the left pane of the pop-up window have a vertical scrollbar if needed when the topic tree is taller than the window height.

The list (<ul> and <li> tags) must be built as shown because of what the JavaScript and CSS expect.

NestedTopics.html

This file has the content of the help. If there are multiple topics in this file that will be linked to independently, the following must be done:

Include helptopic.js and be sure to use <div id=”main”> around all of the content paragraphs.

Each topic must be given a unique id attribute.

<script src=”../helptopic.js” type=”text/javascript”></script> <body>
<div id=”main”>
<p id=”First”><b>First Topic</b></p>

helptopic.js

This JavaScript file should be included in content files that have multiple topics that will be linked to independently. The code is wrapped in a function and not called until the page is called in order to make sure all page elements have been created before attempting to access them. The included comments should explain the rest.

window.onload = startup; function startup(){
// add some height to the page so lower anchors can show at the top
var main = document.getElementById(“main”);
main.style.height = main.scrollHeight * 2 + 20;

// get the topic out of the querystring
var topic = location.search.substring(1);
// if we have topic, scroll down to it
if (topic != “”)
document.body.scrollTop = document.getElementById(topic).offsetTop;
}

Extra tidbits:

IE7 will still show an address bar due to its security rules. (Only visible when not running on a local machine.)

aqtree3clickable.js and aqtree3clickable.css

I grabbed these 2 files from this site: http://www.kryogenix.org/code/browser/aqlists/. They convert an unordered list into a nice collapsible tree. Note: I modified the .css file with new graphic links and some different styles.

Leave your comment

*