www.webdeveloper.com
Results 1 to 11 of 11

Thread: javascript loop problem

Hybrid View

  1. #1
    Join Date
    Jul 2010
    Posts
    28

    javascript loop problem

    hi, can anyone help me to code the following correctly. I am trying to fade up a whole load of thumbnail images with sequential ids pop_2_2 to pop_2_49. I am calling a fade function called fadeFull with three arguements for fade direction, fade speed and delay. I am trying to use a loop as below. I'm sure I'm probably doing something wrong with the brackets and I've tried various permutations but nothing seems to get the fade function to work. I know the fade function itself definately works fine because I'm using it for several other things in the code. Very grateful for any advice.

    for(var i=2; i<=49; i++)
    {
    fadeFull('pop_2_'+i,1,1000,0);
    }

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Not sure about the details of fadeFull, but I'd say this is what you need.
    Code:
    for(var i=2; i<=49; i++)
    {
    fadeFull('pop_2_'+i,1,1000*(i-2),0);
    }

  3. #3
    Join Date
    Jul 2010
    Posts
    28
    thanks declan1991 but i'm still not really understanding. will that amendment not just alter the speed of fade ie - multiply the speed by the incrementer minus 2 ?

  4. #4
    Join Date
    Jun 2010
    Posts
    64

    More information required

    Can you supply any more information about this "fullFade" function your calling. It's signiture and any comments would be useful and it's implementation would be great (seems so I find it a bit odd how your passing strings to it as the first param...)

  5. #5
    Join Date
    Jul 2010
    Posts
    28
    thanks for your reply acestuff. I can post the code for the fade function if you think it would be helpful, but I know that the fade function is working fine. I am sending several different objects to it and they all work except for the one i originally posted the question about.

    as an example :
    fadeFull('studioinfo',1,1000,500)
    this fades a div object called studioinfo : the 1 (as opposed to 0) means it fades in rather than out, the 1000 means it takes 1000 miliseconds to fade fully and the 500 means there is a 500 milisecond delay on the fade. this all works perfectly.

    however, when i try to fade multiple items, like the 48 thumnails with div ids pop_2_1 to pop_2_49 , with the following code ...
    for(var i=2; i<=49; i++)
    {
    fadeFull('pop_2_'+i,1,1000,0);
    }

    ... it doesn't work.

  6. #6
    Join Date
    Jun 2010
    Posts
    64
    It would be interesting to see the actual implementation of fadeFull as your code looks as though it should do what you intend it to.

    Just as a stab in the dark: have you tried setting a small delay on the fade?
    Eg:
    Code:
    for(var i = 2; i <= 49; i++) {
       fadeFull(("pop_2_" + i), 1, 1000, 10);
    }
    Last edited by acestuff; 06-18-2011 at 07:00 PM.

  7. #7
    Join Date
    Aug 2007
    Posts
    3,767
    Quote Originally Posted by android1 View Post
    thanks declan1991 but i'm still not really understanding. will that amendment not just alter the speed of fade ie - multiply the speed by the incrementer minus 2 ?
    Well, I just can't seem to gather from you what you want. Are all these fades to happen simultaneously? If so, my suggestion was totally unhelpful! Otherwise, we cannot help you without details of the function.

  8. #8
    Join Date
    Jul 2010
    Posts
    28
    Acestuff/ Declan1991, Hi, yes they were all meant to happen simultaneously. The fade function is pasted below. It works fine with any single div elements I send to it, but doesn't do anything with the multiple one i'm posting about. Acestuff, I tried the small delay you suggested, but still no luck.

    // fade opacity from 0 to 100

    function fadeFull(objToFadeID, IsFadeIn, timeToFade, delay)
    {
    //objToFadeID - Object ID of the Div or object you want to fade
    //IsFadeIn - Is this a fade in (vs fade out) 1 = true, 0 = false
    //timeToFade - Time in ms to fade the object
    //delay - Time in ms to delay the fade

    var objToFade = document.getElementById(objToFadeID);
    if(objToFade == null)
    return;

    var fadeXFactor = IsFadeIn==1?1:-1; // used to reverse values for fade in vs out

    if ((timeToFade==0)&&(delay==0))
    {
    //if this is a simple instant popup, then make the settings are return
    objToFade.style.opacity = 1*IsFadeIn;
    objToFade.style.filter = 'alpha(opacity = ' + 100*IsFadeIn + ')';
    objToFade.fadeState=2*fadeXFactor;
    return;
    }

    if (delay == null)
    delay = 0;

    if (IsFadeIn)
    objToFade.OriginalFadeInTime = timeToFade;
    else
    objToFade.OriginalFadeOutTime = timeToFade;

    if(objToFade.fadeState != null)
    {

    if ((objToFade.fadeState==1*fadeXFactor)||(objToFade.fadeState==2*fadeXFactor)||(objToFade.fadeState==3 *fadeXFactor))
    {
    return; //Current fade is in same direction or already there so we are OK;
    }
    else if (objToFade.fadeState==-1*fadeXFactor)
    {
    //reverse the time and the fade direction and let it continue
    objToFade.fadeState = 1*fadeXFactor;
    objToFade.timeToFade = timeToFade;
    if (IsFadeIn)
    {
    objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeOutTime);
    }
    else
    {
    objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeInTime);
    }

    return;
    }
    else if (objToFade.fadeState==-3*fadeXFactor)
    {
    //object is in hold status but direction needs to be reversed and use the passed in time value
    objToFade.fadeState=3*fadeXFactor;
    objToFade.timeToFade = timeToFade;
    if (IsFadeIn)
    {
    objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeOutTime);
    }
    else
    {
    objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeInTime);
    }
    return;
    }
    }

    //if we got this far, then the object is in the fully opposite state
    objToFade.timeToFade = timeToFade;
    objToFade.fadeTimeLeft = timeToFade;
    objToFade.fadeState = 3*fadeXFactor;
    var now = new Date();
    now.setMilliseconds(now.getMilliseconds() + delay);
    setTimeout("animateFade(" + now.getTime() + ",'" + objToFadeID + "')", 10 + delay);
    }

    function animateFade(lastTick, elementID)
    {
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var element = document.getElementById(elementID);
    if (element.fadeState==3) element.fadeState=1;
    if (element.fadeState==-3) element.fadeState=-1;

    if(element.fadeTimeLeft <= elapsedTicks)
    {
    element.style.opacity = element.fadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = ' + (element.fadeState == 1 ? '100' : '0') + ')';
    element.fadeState = element.fadeState == 1 ? 2 : -2;
    return;
    }

    element.fadeTimeLeft -= elapsedTicks;
    var newOpVal = element.fadeTimeLeft/element.timeToFade;
    if(element.fadeState == 1)

    newOpVal = 1 - newOpVal ;

    element.style.opacity = newOpVal;
    element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

    setTimeout("animateFade(" + curTick + ",'" + elementID + "')", 10);
    }

  9. #9
    Join Date
    Jul 2010
    Posts
    28
    Acestuff / Declan1991,
    Problem solved! My apologies, I was doing something rather stupid - 'pop_2_x' was actually the name I had given so i could access the divs through the window object. The original divs were called 'thumb_2_x', so I should have been sending 'thumb_2_'+i to the fade function. Very sorry for this and many thanks again for your help. It's all useful learing for us novices.

  10. #10
    Join Date
    Aug 2007
    Posts
    3,767
    Quote Originally Posted by android1 View Post
    It's all useful learing for us novices.
    It's the stupid mistakes that are the hardest to find!

  11. #11
    Join Date
    Jul 2010
    Posts
    28
    indeed!
    btw i really liked the effect your *(i-2) suggestion had on the fade - subtely sequential rather than simultaneous - so i'm going to add it. so many thanks for that.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles