Now, I have a small problem, but thats another matter, so I'll stick to the point.

 

I have 3no javascript image faders side by side on a web page.

 

Each fader has 4 images in it, and each fader is controled by its own .js file and styled in an external css.

 

The faders are placed in a row and when the page is loaded the initial image of each fader is displayed, so you have three images in a row.

 

The problem is that only the first fader starts to scroll through it's 4 images, and at lightning speed, the other two faders apear frozen on their initial image.

 

All the java script for all three faders was in one .js file, but only the last fader worked and the first two didn't even display their initial images, so it looked like there was only one fader. I separated the js into individual files so now all the faders diplay initially, but like I said, only the first fader scrolls, and to fast.

 

The code I am using for all three faders is the the same, except each one has its own reference in the script. The script is:

 

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;

css = d.createElement("link");
css.setAttribute("href","design/iccdstyle.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);

imgs = d.getElementById("imageContainerleft").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;

setTimeout(so_xfade,2500);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;

nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05; 
nOpacity+=.05;

imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]); 
setOpacity(imgs[nIndex]);

if(cOpacity<=0) {
	imgs[current].style.display = "none";
	current = nIndex;
	setTimeout(so_xfade,2500);
} else {
	setTimeout(so_xfade,50);
}

function setOpacity(obj) {
	if(obj.xOpacity>.99) {
		obj.xOpacity = .99;
		return;
	}
	obj.style.opacity = obj.xOpacity;
	obj.style.MozOpacity = obj.xOpacity;
	obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

}

 

The code is the same for each fader, but I just wonder why only one is working. There must be some kind of conflict with them being on the same page. I called the script up like:

 

<script language="JavaScript" type="text/javascript" src="imagefaderleft.js"></script>
<script language="JavaScript" type="text/javascript" src="imagefadermiddle.js"></script>
<script language="JavaScript" type="text/javascript" src="imagefaderright.js"></script>

 

Any ideas why it is not working?

 

Thanks anyone

Have you changed the following line in each script to reference a different image container?

imgs = d.getElementById("imageContainerleft").getElementsByTagName("img");

Have you changed the following line in each script to reference a different image container?

imgs = d.getElementById("imageContainerleft").getElementsByTagName("img");

 

Yes, there is one for each. Insidentely, in ff 3, it is the last fader that is working (allbeit to fast) and the first two frozen, so if the references were missing, I gues ff 3 would display the same as ie7.

 

Cheers

Any other ideas?

 

Anyone

Well.. there is always Jquery + JQuery Cycle. I think it accomplishes what you wish to accomplish. That's the easy way out I guess.

Well.. there is always Jquery + JQuery Cycle. I think it accomplishes what you wish to accomplish. That's the easy way out I guess.

 

Thanks for the suggestion mate, but the script works, just not when there is another of the same on the same page, there must be a way of fixing the problem. But thanks for taking the time to give some imput, I appreciate it.

 

I am wondering if I should have put this on the coding forums, say the first one on the the xhtml one, or if there is one suited to java script. If anyone knows how to get it moved, can they post here so I can request it to be moved. I have looked all over for a way of requesting it but I must be blind as I can't find anything.

 

If a moderator happens upon this can you move this thread please to the xhtml coding forum please.

 

Thanks everyone

 

Kind regards