Developing
Context-sensitive Help
for Web Applications
Scott DeLoach
Session Overview
We will discuss how to open and
display context-sensitive Help using:
a separate Help window
an embedded Help window
a popup window
DHTML layers
and how to store Help topics in a
Help database.
Sample Application
Page-level Help
Field-level Help
Opening the Help
When the user…
Presses F1
Clicks a page-level Help link
Clicks a field-level Help link
Highlights a term and presses F1
Opening Help with F1
(IE Only)
<body onHelp="openHelp();return false">
Opening Page-level Help
with a Link
<a href="#" onClick="openHelp()">Help</a>
Opening Field-level Help
with a Link
<a href="#" onClick="openHelp('ProjectNumber')">
<img src="fieldhelp.gif" width="18" height="18" border="0“>
</a>
Opening Help Based on a
Highlighted Term
Add to the beginning of openHelp():
// Netscape
if (document.getSelection) highID =
(document.getSelection);
// IE
else if (document.selection &&
document.selection.createRange)
{
var range = document.selection.createRange();
highID = range.text;
}
Opening the Help
F1 key
Page-level Help link
Field-level Help link
Highlighted term
Mouseover
Displaying the Help
Separate Help window
Popup window
Embedded Help window
DHTML “popup” layer
Separate Help Window
Opening a Separate Help Window
function openHelp(id) {
// id from field-level links and highID from highlighted text
helpurl = location.href;
begin=(helpurl.lastIndexOf('/') + 1);
end=(helpurl.lastIndexOf('m') + 1);
if (id) helpurl = "h_"+id+"_"+helpurl.substring(begin, end);
else if (highID) helpurl = "h_" + highID + "_" +
helpurl.substring(begin, end);
else helpurl = "h_" + helpurl.substring(begin, end);
helpWin = window.open(helpurl,'CShelpwin','toolbar=0,
location=0,directories=0,status=0,menubar=0,
scrollbars=1,resizable=1,width=500,height=600');
setTimeout('helpWin.focus();',250);
}
Popup Window
Opening a Popup Window
<script>
var x=y=0;
function getPos(e) {
if (e != '') {
x = e.screenX;
y = e.screenY;
}}
Opening a Popup Window
(cont)
function help(helpurl) {
w = screen.availWidth; h = screen.availHeight;
if (w=='1024') {
w=970; h=775;
}
wintop = y+15;
winleft = x-15;
// next line adjusts if window is off the screen
if (w - (x+550) < 0) winleft = w-525;
window.open(helpurl,"helpwin",'toolbar=0,location=0,
directories=0,status=0,menubar=0,scrollbars=1,
resizable=1,width=550,height=80,screenX=' + wintop
+ ',screen=' + winleft + ',top=' + wintop + ',left=' +
winleft);
}
Embedded Help Window
Opening an Embedded Help
Window
Create a “Top” level frameset
<frameset cols="100%,*" rows="*"
frameborder="NO" name="myframes">
<frame src=“yourapplication.htm" name="app">
<frame src="helpblank.htm" name="help">
</frameset>
Resize the frameset and open the Help
<script>
function openHelp() {
parent.myframes.cols="70%,30%";
parent.help.location = "helppage.htm";
}
</script>
DHTML Help Layer
Opening a DHTML Help
Layer on “mouseover”
<span id="description" onMouseOver="helpSHOW(this.id)"
onMouseOut="helpHIDE(this.id)">Description</span>
<script>
function helpSHOW(fieldID) {
fieldID = "help" + fieldID;
if (document.all) document.all(fieldID).style.visibility = "visible";
else document.layers[fieldID].visibility = "show";
}
function helpHIDE(fieldID) {
fieldID = "help" + fieldID;
if (document.all) document.all(fieldID).style.visibility = "hidden";
else document.layers[fieldID].visibility = "hide";
}
</script>
Displaying the Help
Separate Help window
Popup window
Embedded Help window
DHTML “popup” layer
Opening a Help Window
using ASP
<a href="#" onClick="openFieldHelp('ProjectNumber')">
<img src="fieldhelp.gif" width="18" height="18"
border="0"></a>
<script>
function openFieldHelp(topic) {
window.open('fieldhelp.asp?' + topic,'helpwin','toolbar=0,
location=0,directories=0,status=0,menubar=0,
scrollbars=1,resizable=0,width=600, height=400');
}
</script>
Storing Field-level Help in a
Database
"HlpText" is used to store defaults.
"HlpTextCustom" is used to store
modified Help topics.
Opening the Help Database
VBScript Code to Open the Database
Dim objConn
Set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open "DRIVER={Microsoft Access Driver (*.mdb)};
DBQ=" & Server.MapPath("\db\fieldhelp.mdb")
Dim objRS
Set objRS = Server.CreateObject("ADODB.Recordset")
objRS.Open "Tutorial", objConn, , , adCmdTable
Finding and Displaying Help
from the Database
Code to Pull the Field Help from the Database
Do While Not objRS.EOF
If Request.QueryString = objRS("FieldID") Then
If objRS("HlpTextCustom") <> "" Then
Response.Write "<b>"& objRS("FieldLabel") &
"</b><br> " & objRS("HlpTextCustom")
Else
Response.Write "<b>"& objRS("FieldLabel") &
"</b><br> " & objRS("HlpText")
End If
End If
objRS.MoveNext
Loop
Recommended Books
Designing with JavaScript
by Nick Heinle
JavaScript Bible
by Danny Goodman
Teach Yourself Active Server Pages in 21
Days
by Scott Mitchell and James Atkinson
DHTML Reference and SDK
from Microsoft Press
Downloading the Examples
All scripts and examples can be
downloaded at:
www.userfirst.net/demos
Questions?
Feel free to e-mail me. Or, catch me
later at the conference!
Scott DeLoach
Founding Partner, User First Services, Inc.
Certified RoboHELP Instructor
CIW Master Designer
404.520.0003
[email protected]
© Copyright 2026 Paperzz