...

View Full Version : problem with setTimeout - issue with variable scope?



scottbirdsey
08-07-2008, 09:36 PM
Hey, I've just done a fair amount of research but still cannot get this to work. Quick overview - using a modified,simple opacity script I found from www.akxl.net

-Script makes a pop-out menu first become visible and then animates opacity to 100.
-Script then fades the element to opacity level 0 after a given time, and (IS ATTEMPTING) to make the element hidden, so the links on the menu don't register on mouseover.

I am still struggling for a solid foothold on javascript so I imagine my error will be clear to everyone - I thought my method of passing functions and avoiding any variables in the setTimeout was okay. Here is the script (the html is a simple onmouseover command to call FadeOpacity, the rest happens by itself)

function FadeOpacity(elemId, fromOpacity, toOpacity, time, fps)
{
object = document.getElementById(elemId);
if (object.style.visibility == 'visible')
return;

var steps = Math.ceil(fps * (time / 1000));
var delta = (toOpacity - fromOpacity) / steps;

setTimeout("FadeOpacityStep('" + elemId + "', " + 0 + ", " + steps + ", " + fromOpacity + ", " + delta + ", " + (time / steps) + ")", 200);
setTimeout("FadeOpacityStep('" + elemId + "', " + 0 + ", " + steps + ", " + 100 + ", " + (-100/steps) + ", " + (time / steps) + ");", 7200);
setTimeout("HideElement('" + elemId + ")", 7201);
}


function FadeOpacityStep(elemId, stepNum, steps, fromOpacity, delta, timePerStep)
{
object = document.getElementById(elemId);
object.style.visibility='visible';


SetOpacity(document.getElementById(elemId), Math.round(parseInt(fromOpacity) + (delta * stepNum)));

if (stepNum < steps)
setTimeout("FadeOpacityStep('" + elemId + "', " + (stepNum+1) + ", " + steps + ", " + fromOpacity + ", " + delta + ", " + timePerStep + ");", timePerStep);


}


function SetOpacity(elem, opacityAsInt)
{
var opacityAsDecimal = opacityAsInt;

if (opacityAsInt > 100)
opacityAsInt = opacityAsDecimal = 100;
else if (opacityAsInt < 0)
opacityAsInt = opacityAsDecimal = 0;

opacityAsDecimal /= 100;


elem.style.opacity = opacityAsDecimal;
elem.style.filter = "alpha(opacity=" + opacityAsInt + ")";
}


function HideElement(elemId){
object = document.getElementById(elemId);
object.style.visibility='hidden';
}

ninnypants
08-07-2008, 09:43 PM
The script needs variables to function. I believe you would just set it up something like this on your links


onmouseover="FadeOpacity(myLink, 0, 100, 3, 9);"
onmouseout="FadeOpacity(myLink, 100, 0, 3, 9);"

scottbirdsey
08-08-2008, 03:23 AM
I probably didn't communicate properly because I was flustered - most of this works fine. The pop up fades in properly, and fades out properly at the appropriate designated time. However, its visibility style does not go back to being hidden.

ninnypants
08-08-2008, 04:05 AM
Try changing the colored section


function HideElement(elemId){
object = document.getElementById(elemId);
object.style.display='none';
}


*EDIT* greason wolfe is right about "visibility I was thinking display, but that may not work

greasonwolfe
08-08-2008, 04:14 AM
I used to get hit by this all the time and was recently working with a similar problem . . .


function HideElement(elemId){
object = document.getElementById(elemId);
object.style.visibility="hidden";
}


Try changing the single quotation marks (apostrophies) to double quotation marks. Also, as far as I know, a value of "none" is not an option for visibility. It should be "visible" "hidden" and "collapse"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum