Using Event.observe -- Closure issue?
"Adam Griffis" <[email protected]> Wed, 7 Feb 2007 10:12:40 -0500 (EST)
| Newsgroups | gmane.comp.web.dom.wdf |
|---|---|
| Message-ID | <[email protected]> |
--XvtM3xtUDWU8Z38xZ4b-f0Hfu6JAr7TdTSWjWch
Content-Type: text/plain; charset=iso-8859-1
Content-Transfer-Encoding: 8bit
Hello all,
For one of my work projects, I needed to add tool tips to elements on the
page. I decided to do this myself rather than use one of the tooltip
libraries available online, as most of them were much more bloated than
what I needed. I'm also using the prototype javascript library, in
particular the Event.observe functionality. I'm not using 'alt' tags to
accomplish this because many of the tooltips are on divs with background
images rather than on images themselves.
The problem I'm having stems from passing multiple arguments to a function
rather than just one at a time, and I think it might be some sort of
closure issue but I'm not certain how to resolve it. I have the an example
page set up, with a longer description and examples of the problem in
action:
http://www.griffisweb.com/tooltip/
ANY suggestions on what I should do to get this working when I pass
multiple paramters?? Any help will be greatly appreciated!
Thanks!
Adam
--XvtM3xtUDWU8Z38xZ4b-f0Hfu6JAr7TdTSWjWch
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: 7bit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<!-- Network content -->
<body style="background-color: #ffffff;">
<!--~-|**|PrettyHtmlStartT|**|-~-->
<div id="ygrp-mlmsg" style="width:655px; position:relative;">
<div id="ygrp-msg" style="width: 490px; padding: 0 15px 0 0; float:left; z-index:1;">
<!--~-|**|PrettyHtmlEndT|**|-~-->
<div id="ygrp-text">
<p>Hello all,<br>
<br>
For one of my work projects, I needed to add tool tips to elements on the<br>
page. I decided to do this myself rather than use one of the tooltip<br>
libraries available online, as most of them were much more bloated than<br>
what I needed. I'm also using the prototype javascript library, in<br>
particular the Event.observe functionality. I'm not using 'alt' tags to<br>
accomplish this because many of the tooltips are on divs with background<br>
images rather than on images themselves.<br>
<br>
The problem I'm having stems from passing multiple arguments to a function<br>
rather than just one at a time, and I think it might be some sort of<br>
closure issue but I'm not certain how to resolve it. I have the an example<br>
page set up, with a longer description and examples of the problem in<br>
action:<br>
<br>
<a href="http://www.griffisweb.com/tooltip/">http://www.griffisw<wbr>eb.com/tooltip/</a><br>
<br>
ANY suggestions on what I should do to get this working when I pass<br>
multiple paramters?? Any help will be greatly appreciated!<br>
<br>
Thanks!<br>
Adam<br>
<br>
</p>
</div>
<!--~-|**|PrettyHtmlStart|**|-~-->
<span width="1" style="color: white;">__._,_.___</span>
<!-- Start the section with Message In topic -->
<div id="ygrp-actbar">
<span class="left">
<a href="http://groups.yahoo.com/group/wdf-dom/message/5571;_ylc=X3oDMTM0b2pudGMxBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBG1zZ0lkAzU1NzEEc2VjA2Z0cgRzbGsDdnRwYwRzdGltZQMxMTcwODYxMjA4BHRwY0lkAzU1NzE-">
Messages in this topic </a> (<span class="bld">1</span>)
</span>
<a href="http://groups.yahoo.com/group/wdf-dom/post;_ylc=X3oDMTJwdjRwYmlxBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBG1zZ0lkAzU1NzEEc2VjA2Z0cgRzbGsDcnBseQRzdGltZQMxMTcwODYxMjA4?act=reply&messageNum=5571">
<span class="bld">
Reply </span> (via web post)
</a> |
<a href="http://groups.yahoo.com/group/wdf-dom/post;_ylc=X3oDMTJla2NoOWdpBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA250cGMEc3RpbWUDMTE3MDg2MTIwOA--" class="bld">
Start a new topic </a>
</div>
<!------- Start Nav Bar ------>
<!-- |**|begin egp html banner|**| -->
<div id="ygrp-vitnav">
<a href="http://groups.yahoo.com/group/wdf-dom/messages;_ylc=X3oDMTJldXY3cTlhBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA21zZ3MEc3RpbWUDMTE3MDg2MTIwOA--">Messages</a>
</div>
<!-- |**|end egp html banner|**| -->
<!-- Do not have place to put it yet -->
<div id="ygrp-grft">
</div>
<!-- yahoo logo -->
<!-- |**|begin egp html banner|**| -->
<div id="ygrp-ft">
<a href="http://groups.yahoo.com/;_ylc=X3oDMTJkNm1vcjZhBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA2dmcARzdGltZQMxMTcwODYxMjA4">
<img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/logo/ma_grp_160.gif" height="15" width="106" border="0" alt="Yahoo! Groups"></a> <br>
<a href="http://groups.yahoo.com/group/wdf-dom/join;_ylc=X3oDMTJmOTZoYjhpBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA3N0bmdzBHN0aW1lAzExNzA4NjEyMDg-">Change settings via the Web</a> (Yahoo! ID required) <br>
Change settings via email: <a href="mailto:[email protected]?subject=Email Delivery: Digest">Switch delivery to Daily Digest</a> | <a href = "mailto:[email protected]?subject=Change Delivery Format: Traditional">Switch format to Traditional</a> <br>
<a href="http://groups.yahoo.com/group/wdf-dom;_ylc=X3oDMTJkN3NvaWEwBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA2hwZgRzdGltZQMxMTcwODYxMjA4">
Visit Your Group
</a> |
<a href="http://docs.yahoo.com/info/terms/">
Yahoo! Groups Terms of Use </a> |
<a href="mailto:[email protected]?subject=">
Unsubscribe </a>
</div> <!-- |**|end egp html banner|**| -->
</div> <!-- ygrp-msg -->
<!-- Sponsor -->
<!-- |**|begin egp html banner|**| -->
<div id="ygrp-sponsor" style="width:140px;float: left; clear: none; margin-left: 5px; background:white; margin-bottom:25px ;position:absolute; top:0; right: 0;">
<!-- Network content -->
<!-- Start vitality -->
<div id="ygrp-vital">
<div id="vithd">Recent Activity</div>
<ul style="list-style-type:none; padding: 0; margin: 2px 0;">
<li style="clear: both;">
<div class="ct" style="float: right;"><span style="display:none"> </span>1</div>
<div class="cat"><a href="http://groups.yahoo.com/group/wdf-dom/members;_ylc=X3oDMTJmbDFudjZjBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzExNzA4NjEyMDg-">New Members</a></div>
</li>
</ul>
<a href="http://groups.yahoo.com/group/wdf-dom;_ylc=X3oDMTJlOTduOWtoBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTE3MDg2MTIwOA--">
Visit Your Group </a>
</div>
<!-- Network content -->
<div id="nc">
<div class="ad">
<div id="hd1">Give Back</div>
<p><a href="http://us.lrd.yahoo.com/_ylc=X3oDMTJtM2dqaDVkBF9TAzk3MzU5NzE0BF9wAzEEZ3JwSWQDMjU2NDU2MwRncnBzcElkAzE3MDUwMTYwNjEEc2VjA25jbW9kBHNsawNicmFuZARzdGltZQMxMTcwODYxMjA4;_ylg=1/SIG=11314uv3k/**http%3A//brand.yahoo.com/forgood">Yahoo! for Good</a></p>
<p>Get inspired</p>
<p>by a good cause.</p>
</div>
<div class="ad">
<div id="hd1">Y! Toolbar</div>
<p><a href="http://us.lrd.yahoo.com/_ylc=X3oDMTJvNzJ0bTN1BF9TAzk3MzU5NzE0BF9wAzIEZ3JwSWQDMjU2NDU2MwRncnBzcElkAzE3MDUwMTYwNjEEc2VjA25jbW9kBHNsawN0b29sYmFyBHN0aW1lAzExNzA4NjEyMDg-;_ylg=1/SIG=11c6dvmk9/**http%3A//toolbar.yahoo.com/%3F.cpdl=ygrps">Get it Free!</a></p>
<p>easy 1-click access</p>
<p>to your groups.</p>
</div>
<div class="ad">
<div id="hd1">Yahoo! Groups</div>
<p><a href="http://groups.yahoo.com/start;_ylc=X3oDMTJvbm1idjR0BF9TAzk3MzU5NzE0BF9wAzMEZ3JwSWQDMjU2NDU2MwRncnBzcElkAzE3MDUwMTYwNjEEc2VjA25jbW9kBHNsawNncm91cHMyBHN0aW1lAzExNzA4NjEyMDg-">Start a group</a></p>
<p>in 3 easy steps.</p>
<p>Connect with others.</p>
</div>
</div>
</div> <!-- |**|end egp html banner|**| -->
<div style="clear:both; color: #FFF; font-size:1px;">.</div>
</div> <img src="http://geo.yahoo.com/serv?s=97359714/grpId=2564563/grpspId=1705016061/msgId=5571/stime=1170861208/nc1=1/nc2=2/nc3=3" width="1" height="1"> <br>
<span style="color: white;">__,_._,___</span>
<!--~-|**|PrettyHtmlEnd|**|-~-->
</body>
<!--~-|**|PrettyHtmlStart|**|-~-->
<head>
<style type="text/css">
<!--
#ygrp-mlmsg {font-size:13px; font-family: arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
#ygrp-mlmsg table {font-size:inherit;font:100%;}
#ygrp-mlmsg select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
#ygrp-mlmsg pre, code {font:115% monospace;*font-size:100%;}
#ygrp-mlmsg * {line-height:1.22em;}
#ygrp-text{
font-family: Georgia;
}
#ygrp-text p{
margin: 0 0 1em 0;
}
#ygrp-tpmsgs{
font-family: Arial;
clear: both;
}
#ygrp-vitnav{
padding-top: 10px;
font-family: Verdana;
font-size: 77%;
margin: 0;
}
#ygrp-vitnav a{
padding: 0 1px;
}
#ygrp-actbar{
clear: both;
margin: 25px 0;
white-space:nowrap;
color: #666;
text-align: right;
}
#ygrp-actbar .left{
float: left;
white-space:nowrap;
}
.bld{font-weight:bold;}
#ygrp-grft{
font-family: Verdana;
font-size: 77%;
padding: 15px 0;
}
#ygrp-ft{
font-family: verdana;
font-size: 77%;
border-top: 1px solid #666;
padding: 5px 0;
}
#ygrp-mlmsg #logo{
padding-bottom: 10px;
}
#ygrp-vital{
background-color: #e0ecee;
margin-bottom: 20px;
padding: 2px 0 8px 8px;
}
#ygrp-vital #vithd{
font-size: 77%;
font-family: Verdana;
font-weight: bold;
color: #333;
text-transform: uppercase;
}
#ygrp-vital ul{
padding: 0;
margin: 2px 0;
}
#ygrp-vital ul li{
list-style-type: none;
clear: both;
border: 1px solid #e0ecee;
}
#ygrp-vital ul li .ct{
font-weight: bold;
color: #ff7900;
float: right;
width: 2em;
text-align:right;
padding-right: .5em;
}
#ygrp-vital ul li .cat{
font-weight: bold;
}
#ygrp-vital a {
text-decoration: none;
}
#ygrp-vital a:hover{
text-decoration: underline;
}
#ygrp-sponsor #hd{
color: #999;
font-size: 77%;
}
#ygrp-sponsor #ov{
padding: 6px 13px;
background-color: #e0ecee;
margin-bottom: 20px;
}
#ygrp-sponsor #ov ul{
padding: 0 0 0 8px;
margin: 0;
}
#ygrp-sponsor #ov li{
list-style-type: square;
padding: 6px 0;
font-size: 77%;
}
#ygrp-sponsor #ov li a{
text-decoration: none;
font-size: 130%;
}
#ygrp-sponsor #nc {
background-color: #eee;
margin-bottom: 20px;
padding: 0 8px;
}
#ygrp-sponsor .ad{
padding: 8px 0;
}
#ygrp-sponsor .ad #hd1{
font-family: Arial;
font-weight: bold;
color: #628c2a;
font-size: 100%;
line-height: 122%;
}
#ygrp-sponsor .ad a{
text-decoration: none;
}
#ygrp-sponsor .ad a:hover{
text-decoration: underline;
}
#ygrp-sponsor .ad p{
margin: 0;
}
o {font-size: 0; }
.MsoNormal {
margin: 0 0 0 0;
}
#ygrp-text tt{
font-size: 120%;
}
blockquote{margin: 0 0 0 4px;}
.replbq {margin:4}
-->
</style>
</head>
<!--~-|**|PrettyHtmlEnd|**|-~-->
</html><!--End group email -->
--XvtM3xtUDWU8Z38xZ4b-f0Hfu6JAr7TdTSWjWch--