Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem with setTimeout - issue with variable scope?

    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';
    }

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    The script needs variables to function. I believe you would just set it up something like this on your links
    Code:
    onmouseover="FadeOpacity(myLink, 0, 100, 3, 9);"
    onmouseout="FadeOpacity(myLink, 100, 0, 3, 9);"

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Try changing the colored section
    Code:
    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
    Last edited by ninnypants; 08-08-2008 at 03:32 AM.

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts
    I used to get hit by this all the time and was recently working with a similar problem . . .

    Code:
    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"
    Last edited by greasonwolfe; 08-08-2008 at 03:18 AM.
    Greason Wolfe
    +++++++++++
    Sometimes you don't know what you know until you know it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •