Developing Contextsensitive Help for Web Applications Scott De
Developing Context-sensitive Help for Web Applications Scott De. Loach
Session Overview We will discuss how to open and display context-sensitive Help using: n n 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… n Presses F 1 n Clicks a page-level Help link n Clicks a field-level Help link n Highlights a term and presses F 1
Opening Help with F 1 (IE Only) <body on. Help="open. Help(); return false">
Opening Page-level Help with a Link <a href="#" on. Click="open. Help()">Help</a>
Opening Field-level Help with a Link <a href="#" on. Click="open. Help('Project. Number')"> <img src="fieldhelp. gif" width="18" height="18" border="0“> </a>
Opening Help Based on a Highlighted Term Add to the beginning of open. Help(): // Netscape if (document. get. Selection) high. ID = (document. get. Selection); // IE else if (document. selection && document. selection. create. Range) { var range = document. selection. create. Range(); high. ID = range. text; }
Opening the Help F 1 key n Page-level Help link n Field-level Help link n Highlighted term n Mouseover n
Displaying the Help Separate Help window n Popup window n Embedded Help window n DHTML “popup” layer n
Separate Help Window
Opening a Separate Help Window function open. Help(id) { // id from field-level links and high. ID from highlighted text helpurl = location. href; begin=(helpurl. last. Index. Of('/') + 1); end=(helpurl. last. Index. Of('m') + 1); if (id) helpurl = "h_"+id+"_"+helpurl. substring(begin, end); else if (high. ID) helpurl = "h_" + high. ID + "_" + helpurl. substring(begin, end); else helpurl = "h_" + helpurl. substring(begin, end); help. Win = window. open(helpurl, 'CShelpwin', 'toolbar=0, location=0, directories=0, status=0, menubar=0, scrollbars=1, resizable=1, width=500, height=600'); set. Timeout('help. Win. focus(); ', 250); }
Popup Window
Opening a Popup Window <script> var x=y=0; function get. Pos(e) { if (e != '') { x = e. screen. X; y = e. screen. Y; }}
Opening a Popup Window (cont) function help(helpurl) { w = screen. avail. Width; h = screen. avail. Height; 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, screen. X=' + 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 open. Help() { parent. myframes. cols="70%, 30%"; parent. help. location = "helppage. htm"; } </script>
DHTML Help Layer
Opening a DHTML Help Layer on “mouseover” <span id="description" on. Mouse. Over="help. SHOW(this. id)" on. Mouse. Out="help. HIDE(this. id)">Description</span> <script> function help. SHOW(field. ID) { field. ID = "help" + field. ID; if (document. all) document. all(field. ID). style. visibility = "visible"; else document. layers[field. ID]. visibility = "show"; } function help. HIDE(field. ID) { field. ID = "help" + field. ID; if (document. all) document. all(field. ID). style. visibility = "hidden"; else document. layers[field. ID]. visibility = "hide"; } </script>
Displaying the Help Separate Help window n Popup window n Embedded Help window n DHTML “popup” layer n
Opening a Help Window using ASP <a href="#" on. Click="open. Field. Help('Project. Number')"> <img src="fieldhelp. gif" width="18" height="18" border="0"></a> <script> function open. Field. Help(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 § "Hlp. Text" is used to store defaults. § "Hlp. Text. Custom" is used to store modified Help topics.
Opening the Help Database VBScript Code to Open the Database Dim obj. Conn Set obj. Conn = Server. Create. Object("ADODB. Connection") obj. Conn. Open "DRIVER={Microsoft Access Driver (*. mdb)}; DBQ=" & Server. Map. Path("dbfieldhelp. mdb") Dim obj. RS Set obj. RS = Server. Create. Object("ADODB. Recordset") obj. RS. Open "Tutorial", obj. Conn, , , ad. Cmd. Table
Finding and Displaying Help from the Database Code to Pull the Field Help from the Database Do While Not obj. RS. EOF If Request. Query. String = obj. RS("Field. ID") Then If obj. RS("Hlp. Text. Custom") <> "" Then Response. Write "<b>"& obj. RS("Field. Label") & "</b> " & obj. RS("Hlp. Text. Custom") Else Response. Write "<b>"& obj. RS("Field. Label") & "</b> " & obj. RS("Hlp. Text") End If obj. RS. Move. Next Loop
Recommended Books Designing with Java. Script by Nick Heinle Java. Script 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 De. Loach Founding Partner, User First Services, Inc. Certified Robo. HELP Instructor CIW Master Designer 404. 520. 0003 scott@userfirst. net
- Slides: 27
