DHTML routine to dynamic CF query based: onmouseover, stm

DHTML routine to dynamic CF query based

Asked by: babray

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;position:absolute;z-index: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","","","","",,"black","#ffffcc","","","",,,,2,"#b22222",2,24,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],Style[0])" onMouseOut="htm()">Tip One</A>
<a href="your url" onMouseOver="stm(Text[1],Style[0])" onMouseOut="htm()">Tip two</A>
<a href="your url" onMouseOver="stm(Text[2],Style[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.GlossID#],Style[0])" onMouseOut="htm()">#rs_gloss.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\mystic-minerals.com\View\glossary_table.cfm: line 46

44 : <select name="select" size="10">
45 : <cfoutput query="rs_gloss">
46 : <option value=<a href="#" onMouseOver="stm(Text[#rs_gloss.GlossID#],Style[0])" onMouseOut="htm()">#rs_gloss.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;position:absolute;z-index: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.com
Email 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.Definition"]
Style[0]=["white","000099","","","comicsansms,verdana,arial",2,"black","e8e8ff","","","comicsansms,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.GlossID#],Style[0])" onMouseOut="htm()">#rs_gloss.Word#</a></option>
</cfoutput> </select>
</div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>

Thanks!
Betty

Instant Access to this Solution

Plus...

30 Day FREE access, no risk, no obligation

Collaborate with the world's top tech experts

Unlimited access to our exclusive solution database

Never be left without tech help again

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

"The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.

"Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin

"Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Question

DHTML routine to dynamic CF query based

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

onmouseover

stm

ColdFusion Application Server

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press