Context-Sensitive Help in a Web Page :: Live Demo

This demo illustrates how to include rich context-sensitive help in a web page. For this demo, I have two separate help files, HelpFile1.htm and HelpFile2.htm. When you mouse over the indicated areas below, a help window appears, showing the appropriate help file. This is possible because this page included the necessary JavaScript functions and <div> / <iframe> elements as described in the article, Creating Context-Sensitive Help on a Web Page.

Note that a link in a help window cannot be clicked. This is because mousing off of the help region causes the help window to immediately disappear. To learn how to remedy this, check out Programmatically Creating Context-Sensitive Help on a Web Page.


... Imagine that this is a report or something that needs context-sensitive help ...

Confused? Hover over me to see HelpFile1.htm to the right!

 

Hover over me to see HelpFile2.htm to the left!


Source Code
<script>
function showHelpFloatWindow(windowID, obj, horizPadding, vertPadding, goRight)
{
	var w = document.getElementById(windowID);
	if (w != null)
	{	
		w.style.display = 'block';
		w.style.visibility = 'visible';
		
		w.style.top = getAscendingTops(obj) + vertPadding;
		
		if (getAscendingTops(obj) + vertPadding < 0) w.style.top = 0;
		
		if (goRight == true)
			w.style.left = getAscendingLefts(obj) + obj.offsetWidth + horizPadding;
		else
		{
			w.style.left = getAscendingLefts(obj) - horizPadding;
			if ((getAscendingLefts(obj) - horizPadding) < 0) w.style.left = getAscendingLefts(obj) + obj.offsetWidth + horizPadding;
		}
	}
}


function hideHelpFloatWindow(windowID)
{
	var w = document.getElementById(windowID);
	if (w != null)
	{
		w.style.display = 'none';
		w.style.visibility = 'hidden';
		
		w.top = -999;
		w.left = -999;
	}
}

function getAscendingLefts(elem){
	if (elem==null)
		return 0;
	else
		return elem.offsetLeft+getAscendingLefts(elem.offsetParent);
}

function getAscendingTops(elem){
	if (elem==null)
		return 0;
	else
		return elem.offsetTop+getAscendingTops(elem.offsetParent);
}
</script>

<style>
.HelpWindow
{
	z-index: 999;
	position: absolute;
	top: -999px;
	left: -999px;
	display: none;
	visibility: hidden;
	
	width: 300px;
	height: 250px;
	
	background-color: lightyellow;
	border: dashed 1px black;
}
</style>

<!-- The context-sensitive regions... -->
<span onmouseover="showHelpFloatWindow('MyHelpWindow1', this, 10, 20, true);" 
      onmouseout="hideHelpFloatWindow('MyHelpWindow1');"
	  style="border:solid black 2px;padding:6px;font-size:large;">
         Confused? Hover over me to see <code>HelpFile1.htm</code> to the right!
</span>

<span onmouseover="showHelpFloatWindow('MyHelpWindow2', this, 310, 20, false);"
      onmouseout="hideHelpFloatWindow('MyHelpWindow2');"
	  style="margin-left:375px;border:solid black 2px;background-color:salmon;padding:6px;font-size:large;">
	     Hover over me to see <code>HelpFile<b>2</b>.htm</code> to the left!
</span>


<!-- Here are the help windows -->
<div id="MyHelpWindow1" class="HelpWindow">
  <iframe frameBorder="0" height="100%"
          src="HelpFile1.htm"></iframe>
</div>
<div id="MyHelpWindow2" class="HelpWindow">
  <iframe frameBorder="0" height="100%"
          src="HelpFile2.htm"></iframe>
</div>

[Return to the article...] | [Download the Complete Code...]