JS keyword search/help bubble help

Mon Aug 30 20:58:59 UTC 2004

Hey Madison,

On Mon, 2004-08-30 at 16:30, Madison Kelly wrote:
> 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>
> .

I would try putting the div around only the text.  I have had problems
in the past with divs around table rows...might not cause a problem in
this case but you might as well start off with the simplest example
first.  Try just putting it around text like this:

 <div class="print glossary" id="content">Text</div>can be formatted
using several tags. Mouse over this text to see the ones available.

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

Correct me if I am wrong but there is no onmouseover event even defined
so I don't see how anything would happen onmouseover.  Plus, I don't see
what function would be called for the onmouseover event? 

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

There must be more js that you didn't send.  Are you sure this is it?

>    Thanks so much!!
> 

No problem ;)

Later

Devin Whalen
Programmer
Synaptic Vision Inc
Phone-(416) 539-0801
Fax- (416) 539-8280
1179A King St. West
Toronto, Ontario
Suite 309 M6K 3C5
Home-(416) 653-3982
--
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