Developing Context-sensitive Help for Web Applications Scott DeLoach

Developing Context-sensitive Help

for Web Applications

Scott DeLoach

Session Overview

a separate Help window an embedded Help window a popup window DHTML layers

and how to store Help topics in a Help database.

We will discuss how to open and display context-sensitive Help using:

Sample Application

Field-level Help

Page-level Help

Opening the Help

Presses F1 Clicks a page-level Help link Clicks a field-level Help link Highlights a term and presses F1

When the user…

Opening Help with F1 (IE Only)

<body onHelp="openHelp();return false"><body onHelp="openHelp();return false"><body onHelp="openHelp();return false">

Opening Page-level Help with a Link

<a href="#" onClick="openHelp()">Help</a><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>

<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():

// Netscapeif (document.getSelection) highID = (document.getSelection);

// IEelse 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 Windowfunction 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);}

function openHelp(id) {// id from field-level links and highID from highlighted text




function openHelp(id) {// id from field-level links and highID from highlighted text




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 screenif (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);}

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 screenif (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>

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

<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>




Opening a DHTML Help Layer on “mouseover”




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>

<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 objConnSet objConn = Server.CreateObject("ADODB.Connection")objConn.Open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("\db\fieldhelp.mdb")

Dim objRSSet 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.EOFIf 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 IfEnd IfobjRS.MoveNextLoop











Designing with JavaScript by Nick Heinle

JavaScript Bibleby Danny Goodman

Teach Yourself Active Server Pages in 21 Daysby Scott Mitchell and James Atkinson

DHTML Reference and SDKfrom Microsoft Press

Recommended Books

Downloading the Examples

All scripts and examples can be downloaded at:

www.userfirst.net/demos

Feel free to e-mail me. Or, catch me later at the conference!

Scott DeLoachFounding Partner, User First Services, Inc.Certified RoboHELP InstructorCIW Master Designer [email protected]

Questions?

Documents

Developing Context-sensitive Help for Web Applications Scott DeLoach