1. Developing Context-sensitive Help for Web Applications Scott DeLoach

2. 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:

3. Sample Application Field-level HelpPage-level Help

4. 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…

5. Opening Help with F1 (IE Only)

6. Opening Page-level Help with a Link Help

7. Opening Field-level Help with a Link

8. 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; }

9. Opening the Help F1 key Page-level Help link Field-level Help link Highlighted term Mouseover

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

11. Separate Help Window

12. 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); }

13. Popup Window

14. Opening a Popup Window var x=y=0; function getPos(e) { if (e != '') { x = e.screenX; y = e.screenY; }

15. 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); }

16. Embedded Help Window

17. 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"; }

18. DHTML Help Layer

19. 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"; }

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

21. 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'); }

22. Storing Field-level Help in a Database "HlpText" is used to store defaults. "HlpTextCustom" is used to store modified Help topics.

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

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

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

26. Downloading the Examples All scripts and examples can be downloaded at: www.userfirst.net/demos

27. 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 scott@userfirst.net Questions?