Developing context sensitive help for web applications l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 27

Developing Context-sensitive Help for Web Applications PowerPoint PPT Presentation


  • 99 Views
  • Uploaded on
  • Presentation posted in: General

Developing Context-sensitive Help for Web Applications . Scott DeLoach. Session Overview. We will discuss how to open and display context-sensitive Help using:. a separate Help window an embedded Help window a popup window DHTML layers and how to store Help topics in a Help database.

Download Presentation

Developing Context-sensitive Help for Web Applications

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Developing context sensitive help for web applications l.jpg

Developing Context-sensitive Help for Web Applications

Scott DeLoach


Session overview l.jpg

Session Overview

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

  • 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 l.jpg

Page-level Help

Field-level Help

Sample Application


Opening the help l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 help9 l.jpg

Opening the Help

  • F1 key

  • Page-level Help link

  • Field-level Help link

  • Highlighted term

  • Mouseover


Displaying the help l.jpg

Displaying the Help

  • Separate Help window

  • Popup window

  • Embedded Help window

  • DHTML “popup” layer


Separate help window l.jpg

Separate Help Window


Opening a separate help window l.jpg

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 l.jpg

Popup Window


Opening a popup window l.jpg

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 l.jpg

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 l.jpg

Embedded Help Window


Opening an embedded help window l.jpg

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 l.jpg

DHTML Help Layer


Opening a dhtml help layer on mouseover l.jpg

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>

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


Displaying the help20 l.jpg

Displaying the Help

  • Separate Help window

  • Popup window

  • Embedded Help window

  • DHTML “popup” layer


Opening a help window using asp l.jpg

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 l.jpg

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 l.jpg

Opening the Help Database

VBScript Code to Open the DatabaseDim 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 l.jpg

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 "<b>"& objRS("FieldLabel") & "</b><br> " & objRS("HlpTextCustom")

Else

Response.Write "<b>"& objRS("FieldLabel") & "</b><br> " & objRS("HlpText")

End If

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 "<b>"& objRS("FieldLabel") & "</b><br> " & objRS("HlpTextCustom")

Else

Response.Write "<b>"& objRS("FieldLabel") & "</b><br> " & objRS("HlpText")

End If

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 "<b>"& objRS("FieldLabel") & "</b><br> " & objRS("HlpTextCustom")

Else

Response.Write "<b>"& objRS("FieldLabel") & "</b><br> " & objRS("HlpText")

End If

End If

objRS.MoveNext

Loop


Recommended books l.jpg

Recommended Books

Designing with JavaScriptby 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


Downloading the examples l.jpg

Downloading the Examples

All scripts and examples can be downloaded at:

www.userfirst.net/demos


Questions l.jpg

Questions?

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

[email protected]


  • Login