RE: Using Event.observe -- Closure issue?
"Lon Boonen" <[email protected]> Wed, 7 Feb 2007 16:56:21 +0100
| Newsgroups | gmane.comp.web.dom.wdf |
|---|---|
| Message-ID | <[email protected]> |
--CSQklontQ3RohccxiDX1L7CzwXPVpXn8l43vdI1
Content-Type: text/plain; charset=US-ASCII
Content-Transfer-Encoding: 7bit
It is a closure problem. You have to understand how closures work. The argument you're passing is resolved the moment it is being used. At that moment imgName is resolved. The closure keeps imgName available. It all works as it should, but at the moment imgName is resolved the loop has finished and imgName points to the last imgName set in the loop.
One solution is to create the closure somewhere else:
function createClosure(arg1, arg2)
{
return function() { whatever(arg1, arg2); }
}
and call that one from within your loop.
greetings Lon
________________________________
From: [email protected] on behalf of Adam Griffis
Sent: Wed 2/7/2007 4:12 PM
To: [email protected]
Subject: [wdf-dom] Using Event.observe -- Closure issue?
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/ <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
[Non-text portions of this message have been removed]
--CSQklontQ3RohccxiDX1L7CzwXPVpXn8l43vdI1
Content-Type: text/html; charset=US-ASCII
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>It is a closure problem. You have to understand how closures work. The argument you're passing is resolved the moment it is being used. At that moment imgName is resolved. The closure keeps imgName available. It all works as it should, but at the moment imgName is resolved the loop has finished and imgName points to the last imgName set in the loop.<br>
<br>
One solution is to create the closure somewhere else:<br>
function createClosure(<wbr>arg1, arg2)<br>
{<br>
return function() { whatever(arg1, arg2); }<br>
}<br>
<br>
and call that one from within your loop.<br>
<br>
greetings Lon<br>
<br>
____________<wbr>_________<wbr>_________<wbr>__<br>
<br>
From: <a href="mailto:wdf-dom%40yahoogroups.com">wdf-dom@yahoogroups<wbr>.com</a> on behalf of Adam Griffis<br>
Sent: Wed 2/7/2007 4:12 PM<br>
To: <a href="mailto:wdf-dom%40yahoogroups.com">wdf-dom@yahoogroups<wbr>.com</a><br>
Subject: [wdf-dom] Using Event.observe -- Closure issue?<br>
<br>
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> <<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>
[Non-text portions of this message have been removed]<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=X3oDMTM0dDZmajFlBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBG1zZ0lkAzU1NzIEc2VjA2Z0cgRzbGsDdnRwYwRzdGltZQMxMTcwODYzOTg4BHRwY0lkAzU1NzE-">
Messages in this topic </a> (<span class="bld">2</span>)
</span>
<a href="http://groups.yahoo.com/group/wdf-dom/post;_ylc=X3oDMTJwNjJ2N3RmBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBG1zZ0lkAzU1NzIEc2VjA2Z0cgRzbGsDcnBseQRzdGltZQMxMTcwODYzOTg4?act=reply&messageNum=5572">
<span class="bld">
Reply </span> (via web post)
</a> |
<a href="http://groups.yahoo.com/group/wdf-dom/post;_ylc=X3oDMTJlY21wZ2cyBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA250cGMEc3RpbWUDMTE3MDg2Mzk4OA--" 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=X3oDMTJlNzluazl0BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA21zZ3MEc3RpbWUDMTE3MDg2Mzk4OA--">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=X3oDMTJkbGhvbzh1BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA2dmcARzdGltZQMxMTcwODYzOTg4">
<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=X3oDMTJmbjFwcDd1BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA3N0bmdzBHN0aW1lAzExNzA4NjM5ODg-">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=X3oDMTJkY2RhMmUwBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwNmdHIEc2xrA2hwZgRzdGltZQMxMTcwODYzOTg4">
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=X3oDMTJmZXNicTZ2BF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzExNzA4NjM5ODg-">New Members</a></div>
</li>
</ul>
<a href="http://groups.yahoo.com/group/wdf-dom;_ylc=X3oDMTJlNnNzMHNlBF9TAzk3MzU5NzE0BGdycElkAzI1NjQ1NjMEZ3Jwc3BJZAMxNzA1MDE2MDYxBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTE3MDg2Mzk4OA--">
Visit Your Group </a>
</div>
<!-- Network content -->
<div id="nc">
<div class="ad">
<div id="hd1">Yahoo! Photos</div>
<p><a href="http://us.ard.yahoo.com/SIG=12isik8sm/M=493064.9803230.10510224.8674578/D=groups/S=1705016061:NC/Y=YAHOO/EXP=1170871188/A=3848632/R=0/SIG=10p8tommg/*http://photos.yahoo.com">Upload & Share</a></p>
<p>Delight friends</p>
<p>and family</p> </div>
<div class="ad">
<div id="hd1">Y! GeoCities</div>
<p><a href="http://us.ard.yahoo.com/SIG=12i5ov73h/M=493064.9803219.10510212.8674578/D=groups/S=1705016061:NC/Y=YAHOO/EXP=1170871188/A=3848528/R=0/SIG=11vts2tqq/*http://us.rd.yahoo.com/evt=42416/*http://geocities.yahoo.com/">Share Photos</a></p>
<p>Put your favorite</p>
<p>photos online.</p> </div>
<div class="ad">
<div id="hd1">Yahoo! Groups</div>
<p><a href="http://groups.yahoo.com/start;_ylc=X3oDMTJvNXE3dW1nBF9TAzk3MzU5NzE0BF9wAzMEZ3JwSWQDMjU2NDU2MwRncnBzcElkAzE3MDUwMTYwNjEEc2VjA25jbW9kBHNsawNncm91cHMyBHN0aW1lAzExNzA4NjM5ODg-">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=5572/stime=1170863988/nc1=3848632/nc2=3848528/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 -->
--CSQklontQ3RohccxiDX1L7CzwXPVpXn8l43vdI1--