View
231
Download
0
Category
Tags:
Preview:
Citation preview
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
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
<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>
<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”
<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>
<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
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
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 404.520.0003scott@userfirst.net
Questions?
Recommended