Developing context sensitive help for web applications
Download
1 / 27

Developing Context-sensitive Help for Web Applications - PowerPoint PPT Presentation


  • 152 Views
  • Updated On :

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Developing Context-sensitive Help for Web Applications' - dannon


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



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

}



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

}



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>



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]


ad