Hi!
I found this great little DHTML routine that is perfect for a glossary I am adding. The original is here:
http://migoicons.tripod.com/dhtips.htm (just incase). I did enought poking around to find out that DHTML and Cf work together. I have set up a pop-up window that holds a list dynamically populated with the glossary words. But I am slightly stuck on exactly how to complete the tranformation to query based.
Here's the DHTML basics:
1. Every tip message is created from a combination of one Text array and one Style array the word array in JavaScript means collection.
2. The Text and the Style arrays consist the tip message's configuration values.
3. Every Text and Style have a index number which will be used as a reference to them.
4. The index number of the Text and Style array should be consecutive e.g. Text[0],Text[1] , Style[0],Style[1].
5. You then implement the tips in the links [(A) tags or href tags] by using the STM function which means show tip message.
6. In the STM function you choose which Text and Style array or in other words configuration will be used for this tip.
And code basics of:
<HTML>
<HEAD>
// Make sure that you upload the main15.js to your server and include a link to it as the following
<SCRIPT language="JavaScript1.2" src="main15.js" type="text/javascript""></
SCRIPT>
<TITLE></TITLE>
</HEAD>
<BODY>
<DIV id="tiplayer" style="visibility:hidden;p
osition:ab
solute;z-i
ndex:1000;
top:-100;"
></DIV>
<SCRIPT language="JavaScript1.2" >
Text[0]=["this is title one","this is text one"]
Text[1]=["this is title two","this is text two"]
Text[2]=["this is title three","this is text three"]
Style[0]=["white","","",""
,"",,"blac
k","#ffffc
c","","","
",,,,2,"#b
22222",2,2
4,0.5,0,2,
"gray",,2,
,13]
var TipId="tiplayer" // should be the same as <div> tag's id
var FiltersEnabled = 1 // should be the set as to 1 if your going to use visual effects if not set to 0
mig_clay()
</SCRIPT>
// Now that we created our Text and Style arrays needed lets implement them in the link tags by using a reference to the arrays by their index number in the STM function
<a href="your url" onMouseOver="stm(Text[0],S
tyle[0])" onMouseOut="htm()">Tip One</A>
<a href="your url" onMouseOver="stm(Text[1],S
tyle[0])" onMouseOut="htm()">Tip two</A>
<a href="your url" onMouseOver="stm(Text[2],S
tyle[0])" onMouseOut="htm()">Tip three</A>
I have it so that the list of items is showing, and know that there is an error in the output query:
<option value=<a href="#" onMouseOver="stm(Text[#rs_
gloss.Glos
sID#],Styl
e[0])" onMouseOut="htm()">#rs_glo
ss.Word#</
a></option
>
I also figure that I need to set the Text Array somehow to the query names but again am not sure how to do it. Right now it is not throwing an error except this one:
An expression that began on line 46, column 38.
Your expression might be missing an ending "#" (it might look like #expr ).
The body of a cfoutput tag beginning on line 45, column 14.
The error occurred in C:\CFusionMX\wwwroot\mysti
c-minerals
.com\View\
glossary_t
able.cfm: line 46
44 : <select name="select" size="10">
45 : <cfoutput query="rs_gloss">
46 : <option value=<a href="#" onMouseOver="stm(Text[#rs_
gloss.Glos
sID#],Styl
e[0])" onMouseOut="htm()">#rs_glo
ss.Word#</
a></option
>
47 : </cfoutput> </select>
48 : </div></td>
Can anyone help me understand the dynamics better and see what needs tweaking???
BTW: Here's the code for the complete page:
<cfquery name="rs_gloss" datasource="mmdb">
SELECT GlossID, Word, Definition FROM Glossary ORDER BY Word ASC
</cfquery>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Glossary</title>
<SCRIPT language="JavaScript1.2" src="main15.js" type="text/javascript""></
SCRIPT>
<link href="../organized.css" rel="stylesheet" type="text/css">
</head>
<body>
<DIV id="glossary" style="visibility:hidden;p
osition:ab
solute;z-i
ndex:1000;
top:-100">
</DIV>
<script language="JavaScript1.2" type="text/javascript">
/*
Pleas leave this notice.
DHTML tip message version 1.5 copyright Essam Gamal 2003.
Home Pag:
http://migoicons.tripod.comEmail migoicons@hotmail.com
Script featured on and can be found at Dynamic Drive (
http://www.dynamicdrive.com)
*/
Text[#rs_gloss.GlossID#]=[
#rs_gloss.
Word","#rs
_gloss.Def
inition"]
Style[0]=["white","000099"
,"","","co
micsansms,
verdana,ar
ial",2,"bl
ack","e8e8
ff","","",
"comicsans
ms,verdana
,arial",2,
,,2,"red",
2,,,,,"",2
,2,,]
var TipId="tiplayer" // should be the same as <div> tag's id
var FiltersEnabled = 0 // should be the set as to 1 if your going to use visual effects if not set to 0
mig_clay()
</SCRIPT>
<table width="250" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p align="center" class="blackheadline">To see any definition simply place your cursor over the name and a definition will appear. <br>
<br>
</p></td>
</tr>
<tr>
<td><table width="248" border="1" cellspacing="1" cellpadding="1">
<tr>
<td><div align="center">
<select name="select" size="10">
<cfoutput query="rs_gloss">
<option value=<a href="#" onMouseOver="stm(Text[#rs_
gloss.Glos
sID#],Styl
e[0])" onMouseOut="htm()">#rs_glo
ss.Word#</
a></option
>
</cfoutput> </select>
</div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Thanks!
Betty
