Hi,
> The question is, how can I pass the currentElement value to that
> pseudo function?
It's not a psuedo-function, it's a function. It's anonymous, but
other than that it's exactly the same as any other function.
I'm not saying that to be pedantic. Getting a deep understanding
JavaScript functions is one of the keys to really using the language
well.
In your code, you're calling setTimeout in a loop, and within that
loop (on each iteration) you're creating a function to pass into
setTimeout. You're expecting that that function will receive a frozen
copy of the value of the currentElement variable, and so will refer to
the element for that iteration of the loop. That's where things are
going wrong, because that's not what the function receives. (Don't
worry, *lots* of people make that mistake, it's all part of the
learning curve.)
When a function is created within a scope (such as within another
function), it receives a *live* reference (not a frozen copy) of all
of the variables in that scope. So all of the copies of your
function, when they run, will try to use the value "pic50" -- which
doesn't exist, as you have pic0 through pic49. Why? Because by the
time they use the currentElement variable, it has the value 50.
Try this little experiment to see this effect in action:
function foo() {
var a;
a = 5;
setTimeout(function() { alert("a = " + a); }, 500);
a = 6;
}
If you run foo(), you'll see "a = 6", not "a = 5". Freaky, huh, since
foo() has long since returned. 'a' still exists because the anonymous
function has a reference to it (indirectly, because it has a reference
to the "variable object" that contains all of foo's variables -- even
ones that nothing will ever use again).
This is one of the most powerful features of JavaScript. Search for
"JavaScript closure" to find more about it; I've also written up a bit
about closures here:
http://blog.niftysnippets.org/2008/02/closures-are-not-complicated.html
http://blog.niftysnippets.org/2008/03/closures-by-example.html
What I'd suggest in your situation is write a named function that does
what you want, and accepts a parameter giving the ID to perform the
work on. Something like this:
function applyOpacityEffect(id) {
new Effect.Opacity(id, {duration:0.2, from:0.2, to:1} );
}
...although you can probably make it more general than that, and then
use Function#delay[1] to call it after half a second's delay:
this.timeout = applyOpacityEffect.delay(0.5, currentElement);
[1] http://prototypejs.org/api/function/delay
It doesn't have to be a named function, but it will tend to make the
code clearer.
Have fun!
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Mar 5, 10:43 am, DasJan <jro...@gmail.com> wrote:
> Hi!
>
> I have the following code:
>
> var LightIt = {
> timeout : null,
> highLight : function(elementId){
> clearTimeout(this.timeout);
> var allpics = 50;
> for (var i=0; i < allpics; i++) {
> var currentElement = 'pic' + i;
> var dummyElement = 'dummy' + i;
>
> if($(elementId).style.opacity == 1){
> if(document.getElementById(currentElement) != null) {
> if(currentElement != elementId) {
> this.timeout = setTimeout(function(){new
> Effect.Opacity
> (currentElement, {duration:0.2, from:1, to:0.2} )},400);
> }
> }
> if(document.getElementById(dummyElement) != null) {
> this.timeout = setTimeout(function(){new
> Effect.Opacity
> (dummyElement, {duration:0.2, from:1, to:0.2})},400);
> }
> }
> }
> },
> unhighLight : function(elementId){
> if($(elementId).style.opacity == 1){
> clearTimeout(this.timeout);
> }else{
> var allpics = 50;
> for (var i=0; i < allpics; i++) {
> var currentElement = 'pic' + i;
> var dummyElement = 'dummy' +
> i;
>
>
> if(document.getElementById(currentElement) != null) {
> if(currentElement !=
> elementId) {
> this.timeout =
> setTimeout(function(){new Effect.Opacity
> ( currentElement, {duration:0.2, from:0.2, to:1} )},400);
> }
> }
>
> if(document.getElementById(dummyElement) != null) {
> this.timeout =
> setTimeout(function(){new
> Effect.Opacity( dummyElement, {duration:0.2, from:0.2, to:1} )},400);
> }
> }
> }
> }
>
> }
>
> That code is called by onmouseover="LightIt.highLight('pic1');" and
> onmouseout="LightIt.unhighLight('pic1');".
>
> However my Firebug console displays the following error:
>
> "uncaught exception: [object Object]"
>
> I have have figured out that the problem is this part:
>
> this.timeout = setTimeout(function(){new Effect.Opacity
> (currentElement, {duration:0.2, from:1, to:0.2} )},400);
>
> The "currentElement" in there seems to be empty, because the value is
> not passed to the pseudo function. To see if the script work I did
> this:
>
> this.timeout = setTimeout(function(){new Effect.Opacity('pic1',
> {duration:0.2, from:1, to:0.2} )},400);
>
> When I directly write the element name into the script it works
> perfectly.
>
> The question is, how can I pass the currentElement value to that
> pseudo function?
>
> Thanks,
> Jan
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
