JS keyword search/help bubble help

Mon Aug 30 20:30:21 UTC 2004

Hi all,

   I found some code (finally!) that allows mouse-over help bubbles to 
properly be displayed under Mozilla/Linux. Unfortunately I am at a loss 
trying to understand how it works. Here is what I can tell so far...

   The javascript looks in a page for certain class(?) and anything 
within it is scanned for certain keywords. When a keyword is found it is 
highlighted and a mouse-over help bubble is created which is displayed 
when the mouse rolls over the key word on the screen.

   From what I can tell (I know very little about JS) it works like this:

I need:

<head>
(other stuff)
<script src="$gloss_loc" language="JavaScript" 
type="text/javascript"></script>
</head>
<body (variable)>
<span id="definitionPopup" class="definitionPopup" style="visibility: 
hidden; position: absolute;"></span>
.
.
.
Then when I want the JS to seach for words withing a space use 'div':

<table border="0" cellpadding="4" cellspacing="1" width="94%" 
align="center">
   <div class="print glossary" id="content">
   <tr>
     <td width="100%" align="center" bgcolor="dfdfdf" colspan="3">
       <font face="verdana, arial, sans-serif" size="2">Text can be 
formatted using several tags. Mouse over this text to see the ones 
available.</font>
     </td>
   <tr>
   </div>
.
.
.
</table>

The javascript I am working from (credited to www.pint.com) is like this:

  -=[ Start JS Code ]=-
// ***************************************
// 		INCLUDE THIS FILE IN DOCUMENT HEAD
// 		<script src="/scripts/pint_glossary_definitions.js" 
language="JavaScript1.2" type="text/javascript"></script>
//
// 		INCLUDE THIS IN THE DOCUMENT BODY
// 		<span id="definitionPopup" class="definitionPopup" 
style="visibility: hidden; position: absolute;"></span>
// ***************************************

if(document.getElementById) // don't do anything for non-DOM browsers
	{
	// class name of elements that should be scanned for glossary words
	var PINT_GLOSSARY_glossaryClass 	= "glossary";
	// class name of words that are in the glossary
	var PINT_GLOSSARY_definitionClass 	= "definition";
	// id of popup element that displays the definition
	var PINT_GLOSSARY_popupElementId	= "definitionPopup";

	// text to display in status bar as definitions load
	var PINT_GLOSSARY_loadingStatusMessage = 'Loading Glossary Definitions...';

	// distances from mouse to definition popup
	var PINT_GLOSSARY_popupOffsetX = 15;
	var PINT_GLOSSARY_popupOffsetY =  25;

	// if search should be case sensitive (match word exactly)
	var PINT_GLOSSARY_caseSensitive = false;

	// if search should match only entire words (not part of the word)
	var PINT_GLOSSARY_wholeWord = true;

	// glossary word/definition list - this is where words and their 
definitions are added
	var PINT_GLOSSARY_list = new Array();
	PINT_GLOSSARY_list["Text"] = "this is the definition for <b>Text</b>";
	PINT_GLOSSARY_list["morewords"] = "more definitions";

	}

/* sample styles

<style type="text/css" media="screen">
.definition {
	font-weight: bold;
	text-decoration: underline;
	color: #FF0000;
	cursor: help;
}

.definitionPopup {
	border-right: black 1px solid;
	border-top: black 1px solid;
	border-left: black 1px solid;
	border-bottom: black 1px solid;
	padding: 2px;
	background-color: lightyellow;
	width: 200px;
	font-family: arial;
	font-size: 10pt;
}
</style>

*/

  -=[ End JS Code ]=-

   If I understand it the "Text" in "Text can be formatted using several 
tags. Mouse over this text to see the ones available." should have a 
help-bubble pop up but nothing is happening.

   Soooo, am I missing something obvious? Can anyone see what I am doing 
wrong? As it is the page (created by perl, btw) seems to make no difference.

   Thanks so much!!

Madison
--
The Toronto Linux Users Group.      Meetings: http://tlug.ss.org
TLUG requests: Linux topics, No HTML, wrap text below 80 columns
How to UNSUBSCRIBE: http://tlug.ss.org/subscribe.shtml