Add Context-Sensitive Help to Your IE Applications

Ask the Web Pro 10-Minute Solutions

Add Context-Sensitive Help to Your IE Applications
By Charles C. Caison

Works in Internet Explorer only.

Many Web developers build Internet Explorer (IE) applications that can be improved by adding context-sensitive help. Context-sensitive help can be added to these applications using standard Windows functionality. Many developers don't know that they can easily use the "What's This" functionality that is built into Windows in their own IE applications.

This 10-Minute Solution consists of two separate HTML files (help1.htm and MainPage.htm). The first file (help1.htm) is the main document. You will use it to call the second document (MainPage.htm). You could put the code that calls the second document anywhere, but by putting it in the main body of the page, it will run whenever the document loads. This means that whenever you open or refresh this page, the second page will automatically open. Notice that the showModalDialog function is called with a number of parameters. For our purposes, the most important of these parameters is the "help" parameter. This parameter tells the dialog box to display the "help" button on the title bar beside the "close" button.


<HTML>
<HEAD>
<TITLE>User Help</TITLE>
</HEAD>
<BODY onload="OpenMainPage()">

</BODY>
</HTML>

<SCRIPT LANGUAGE=javascript>
function OpenMainPage()
{
	showModalDialog("MainPage.htm", "MyMainPage",
"dialogWidth=620px;dialogHeight=310px;center=yes;border=thin;help=yes");
	event.cancelBubble=true;
}
</SCRIPT>

After the document is open, you will provide context-sensitive help through the onhelp event. The following code shows how you would detect which object was clicked, and how to react, based on that action. Note that an important line sets the value of SourceID equal to the id property of the srcElement. You use a switch statement with this value to determine which element on the page was selected. You'll take different actions based upon the element that was selected. In this case, you simply set the value of the variable to a different text string and display that string in a message box.


Sub document_onhelp
	ErrorMsg = "No information available for that item."
	TextboxMsg = "Enter your name here."
	ButtonMsg = "Click here to close this window."
	BodyMsg = "Yes, even the body of this page can have help text."
	IntroTextMsg = "This is the description of what to " & _
	"do on the page. Close this dialog box and " & _
	" click on something else."
	CheckboxMsg = "Click me (just for example)."
	
	SourceID = window.event.srcElement.id
	HelpMsg = SourceID
	Select Case UCase(SourceID)
		Case "CHECKBOX1"
			HelpMsg = CheckboxMsg
		Case "INTROTEXT"
			HelpMsg = IntroTextMsg
		Case "MYDOCUMENTBODY" 
			HelpMsg = BodyMsg
		Case "TEXT1" 
			HelpMsg = TextboxMsg
		Case "BUTTON1" 
			HelpMsg = ButtonMsg
		Case Else
			HelpMsg = ErrorMsg
	End Select
	
	Msgbox HelpMsg, vbInformation, "Your Help is Here"
	window.event.cancelBubble=true
End Sub

As you can see in the previous code, it is very easy to add context-sensitive help to your IE applications. Simply open a window with the help button associated with it, and then use the onhelp event to take some action. To try this example for yourself, open help1.htm and follow the directions that appear.

Other 10-Minute Solutions