javascript loop problem

This site is best viewed in a modern browser with JavaScript enabled.

android1

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

Declan1991

Not sure about the details of fadeFull, but I'd say this is what you need.

for(var i=2; i<=49; i++)
{
fadeFull('pop_2_'+i,1,1000[B]*(i-2)[/B],0);
}

android1

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 ?

acestuff

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...)

android1

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.

acestuff

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:

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

Declan1991

android1;1160029 wrote:
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.

android1

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 = 1IsFadeIn;
objToFade.style.filter = 'alpha(opacity = ' + 100IsFadeIn + ')';
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==1fadeXFactor)||(objToFade.fadeState==2fadeXFactor)||(objToFade.fadeState==3fadeXFactor))
{
return; //Current fade is in same direction or already there so we are OK;
}
else if (objToFade.fadeState==-1fadeXFactor)
{
//reverse the time and the fade direction and let it continue
objToFade.fadeState = 1fadeXFactor;
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==-3fadeXFactor)
{
//object is in hold status but direction needs to be reversed and use the passed in time value
objToFade.fadeState=3fadeXFactor;
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);
}

android1

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.

Declan1991

android1;1160194 wrote:
It's all useful learing for us novices.

It's the stupid mistakes that are the hardest to find!

android1

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.