developing context sensitive help for web applications
Download
Skip this Video
Download Presentation
Developing Context-sensitive Help for Web Applications

Loading in 2 Seconds...

play fullscreen
1 / 27

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


  • 153 Views
  • Uploaded 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
session overview
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.

opening the 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
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
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
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
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
Opening the Help
  • F1 key
  • Page-level Help link
  • Field-level Help link
  • Highlighted term
  • Mouseover
displaying the help
Displaying the Help
  • Separate Help window
  • Popup window
  • Embedded Help window
  • DHTML “popup” layer
opening a separate help window
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
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
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
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
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
Displaying the Help
  • Separate Help window
  • Popup window
  • Embedded Help window
  • DHTML “popup” layer
opening a help window using asp
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
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
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
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
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
Downloading the Examples

All scripts and examples can be downloaded at:

www.userfirst.net/demos

questions
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