Member Avatar for cloud09

I have an image rotator that uses nested intervals. The outer one switches the images, and the inner one preforms the fade. The problem is is that the display is not updated during the interval function, and so, the fade is not displayed; the new image just appears- no fade. Is there anyway to force the display to update during the interval? Here is the code:

rotate: function() {
		intA = null;
		intB = null;
		elem = 1;
		pass = true;
		o = 0;
		intA = setInterval(function() {
			if(elem == 1 && pass == false) {
				rotator.elems[rotator.elems.length - 1].style.display = "none";
				rotator.elems[rotator.elems.length - 1].style.opacity = '0';
				rotator.elems[rotator.elems.length - 1].style.mozOpacity = '0';
				rotator.elems[rotator.elems.length - 1].style.filter = "alpha(opacity=0)";
				pass = true;}
			else {
				rotator.elems[elem].style.display = "block";
			intB = setInterval(function() {
				rotator.elems[elem].style.opacity = o * .01;
				rotator.elems[elem].style.mozOpacity = o * .01;
				rotator.elems[elem].style.filter = "alpha(opacity=" + o + ")";
				o++;
				if(o == 101) {
					clearInterval(intB);
					o = 0;}}, 5);
			elem++;}
			if(elem >= rotator.elems.length) {
				for(i = 1; i < rotator.elems.length - 1; i++) {
					rotator.elems[i].style.display = "none";
					rotator.elems[i].style.opacity = '0';
					rotator.elems[i].style.mozOpacity = '0';
					rotator.elems[i].style.filter = "alpha(opacity=0)";}
				elem = 1;
				pass = false;}}, rotator.time + 500);}

rotator.time is value higher than 2000 ms.

Edited by cloud09 because: n/a
  • 2 Contributors
  • 3 Replies
  • 298 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by cloud09
Member Avatar for cloud09

If no one has a way to force the display to update, perhaps someone has another way of creating an image rotator that fades the images in?

Member Avatar for jeppebundsgaard

Hi,
I think the only way to get javascript to update the display is to leave the session. Therefore you can achieve what you want by calling a function with window.setTimeout.

window.setTimeout("rotate("+var1+","+var2+")",10)
function rotate(var1,var2)
{
  //take a step...
  if(not done)
    window.setTimeout("rotate("+var1+","+var2+")",10)
  else
  {
    //Done...
  }
Member Avatar for cloud09

Well I would have liked a reply a little (lot) sooner, I do appreciate it. I ended up using a jquery image rotator, but this will help in the future. Thank you ;).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.