Connecting Context Sensitive WebHelp

 

Note: Current versions of RoboHelp and RoboHtml now implement context sensitive help. For these versions, use the syntax:

 

http://www.domainname.com/project.htm#topic.htm

 

The following steps are useful when using RH9 or earlier, or when wrapping WebHelp with yet another frame.

 

WebHelp is an html-based help system designed to run on a company intranet or on the World Wide Web. Developers can call a single WebHelp topic just as they call any other html page. The WebHelp page displays browse buttons to navigate to previous and subsequent pages, and a 'Show NavPane' button to display the Navigation and Search panels.

Context sensitive help, i.e., calling a specific page while showing the NavPane, takes an extra step or two.

Calling A Single WebHelp Page…

You can call any WebHelp page by itself with the standard <a href= . . .> tag, just as you would any other page on a web site or application. Calling it this way will display the topic without the navigation pane on the left. It would look something like this:

 

<a href="help/project/CSHtopic.htm" target = "_new" >Click here</a>

 

Of course, we’ve taken it a step further by using a function that calls our help pages into a cleaned-up window, stripped of all menus and status bars.

Try calling one page at a time:

 

images/tb_first.jpg

images/tb_monensin2.jpg

images/tb_crambin2.jpg

images/tb_heme2.jpg

images/tb_prot_eng2.jpg

images/tb_hiv_protease2.jpg

images/tb_catalyst2.jpg

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

Page 7

 

Sometimes the topic page alone isn’t enough; we often need the navigation pane as well. One way is to call the project itself; this will display the NavPane and the first page as the default.

 

Calling the WebHelp System and First Page

We can call the WebHelp system, showing the NavPane and the front page with an <a href=… > tag; we use the project name.

 

<a href="help/project.htm" target = "_new" >Click here</a>

 

Call the help system by its project name:

 

images\tb_first.jpg

Page 1

 

This is great if you only need to display the first page with the NavPane. But we often need to call other pages as well…

 

Context Sensitive WebHelp with the NavPane

We can call specific topics with both the topic and navigation panes displayed. We can also call multiple topics into the same window, if we get specific. Here are several ways to do it.

The first method uses the built-in hashmarks found in WebHelp. The second allows you to define extra variables in your URL using a query string.

 

 

 

 

callHelp('help/', 'project.htm#', 'CSH_topic_number_12.htm')

 

...or, to a mid-topic anchor like this:

 

callHelp('help/', 'project.htm#', 'CSH_topic_number_12.htm#midtopic')

 

...try it here - click on a molecule:

 

blacktable

images\tb_first.jpg

images\tb_monensin2.jpg

images\tb_crambin2.jpg

images\tb_heme2.jpg

images\tb_prot_eng2.jpg

images\tb_hiv_protease2.jpg

images\tb_catalyst2.jpg

images\tb_catalyst2.jpg

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

Page 7

midtopic

 

Here’s how to do it:

 

Option One: Build the URL with a Hashmark

 

This might fit the bill: one function and one call. You can add this function to your application, either into the head of the page itself, or included in a .js file:

 

var newWHwindow = null;

var WHwindow = null;

var WHspecs = "top=20, left=20, height=500, width=750, scrollbars='yes', toolbar='no', resizable='yes', status=’no’";

 

var WHPath = "";                //        eg: "userhelp/"  - help is in a subdirectory

var WHproject = "";            //        eg: "project.htm#"

var CStopic = "";                //        eg: "CSH_topic_number_12.htm"

 

function callHelp(WHPath, WHproject, CStopic){

   if (navigator.appName == "Netscape"){

        WHwindow = window.open("", newWHwindow, WHspecs);

        WHwindow.close();

        WHwindow = window.open("", newWHwindow, WHspecs);

        WHwindow.location.href = WHPath + WHproject + CStopic;

        WHwindow.focus();

      }

   else if (WHwindow == null || WHwindow.closed){

        WHwindow = window.open("", newWHwindow, WHspecs);

        WHwindow.location.href = WHPath + WHproject + CStopic;

        }

        else if (WHwindow && !WHwindow.closed){

           if (WHwindow.bsscright)  {

               WHwindow.bsscright.location.href = WHPath + CStopic;

               WHwindow.focus();

               }

           else {

              WHwindow = window.open("", newWHwindow, WHspecs);

              WHwindow.location.href = WHPath + WHproject + CStopic;

              }

         }

   }

 

Call the WebHelp topic like this:

 

callHelp('WebHelp/', 'start.htm#', 'CSH_topic_number_12.htm')

 

You can then call the help system with both panes displayed. Close the WebHelp navigation pane, and the next click for help returns the navigation pane again.

 

Option Two: Build the URL with a Query String.

You can make your WebHelp context sensitive while showing both panes by making a few adjustments to your initial project page. One could use this method to pass variables along to other web pages!


1. First, add the string-parsing code into that start-up file, usually named after the project itself. You can paste in the following script into the < HEAD> section of the html page, or include it in a JavaScript include file, minus the < Script> lines:


<SCRIPT LANGUAGE="JavaScript">
<!--
var pictpage="specific_topic_1"; // sets default
pictpage=window.location.search.substring(1); // grabs the topic page name
// -->
</SCRIPT>



The third line establishes a default page. The fourth line of code grabs the text after the first character, skipping the question mark.

2. In the same file, "Project.htm," replace every instance of the default topic, i.e.:

strWrite += "<FRAME SRC='specific_topic_1' name='bsscright' scrolling='auto'>";


to:

strWrite += "<FRAME SRC=' "+pictpage+".htm' name='bsscright' scrolling='auto'>";



3. We'll use the exact topic name in the variable string. The first part of the URL calls the main project file. The subsequent variable string contains the context-sensitive topic name. So, you can call the context sensitive topic, with the navpane, like this:

<a href="project.htm?specific_topic_1"> Jump to Specific Topic #1 </a>



If you anticipate changing a lot of topics’ names, you may want to make a "map file" to assign page names to specific variables. This allows you to update all of the associated help pages at one time, in one place.

Let us know how it works for you, and any innovations or improvements you might like to see or offer. Thanks!

 

The folks at Copperfield Publishing

 

 

 

 

 

 

 

 

 

 

 

  

 

  

images\copyright2001.jpg           images/seealso.jpg           images\quickclick.jpg