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

Opening Page-level Help with a Link Help

Opening Field-level Help with a Link

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); } 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); } 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 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); } 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 Resize the frameset and open the Help function openHelp() { parent.myframes.cols="70%,30%"; parent.help.location = "helppage.htm"; } Create a Top level frameset Resize the frameset and open the Help function openHelp() { parent.myframes.cols="70%,30%"; parent.help.location = "helppage.htm"; }

DHTML Help Layer

Description 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"; } Description 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"; } Opening a DHTML Help Layer on mouseover Description 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"; }

Displaying the Help Separate Help window Popup window Embedded Help window DHTML popup layer

Opening a Help Window using ASP 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'); } 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'); }

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 " "& objRS("FieldLabel") & " " & objRS("HlpTextCustom") Else Response.Write " "& objRS("FieldLabel") & " " & objRS("HlpText") End If objRS.MoveNext Loop 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 " "& objRS("FieldLabel") & " " & objRS("HlpTextCustom") Else Response.Write " "& objRS("FieldLabel") & " " & objRS("HlpText") End If objRS.MoveNext Loop 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 " "& objRS("FieldLabel") & " " & objRS("HlpTextCustom") Else Response.Write " "& objRS("FieldLabel") & " " & objRS("HlpText") End If objRS.MoveNext Loop

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

Downloading the Examples All scripts and examples can be downloaded at:

Feel free to me. Or, catch me later at the conference! Scott DeLoach Founding Partner, User First Services, Inc. Certified RoboHELP Instructor CIW Master Designer Questions?