Help with the rotating js file?

[BLiZZaRD]

Hey I have a tiny little rotating/randomizing js file that works really really well.

See it here:

divs = ['d1','d2','d3','d4','d5'];

function hideDivs() {
for (var i=0; i<divs.length; i++)
document.getElementById(divs[i]).style.display = 'none';
}

function showDiv() {
hideDivs(); //hide them all before we show the next one.
var randomDiv = divs[Math.floor(Math.random()*divs.length)];
var div = document.getElementById(randomDiv).style.display =
'block';

setTimeout(showDiv,8000); //set a delay before showing the next div
}

Told you it was tiny.

Now basically what this does is it takes specific divs in my html and hides them, then picks one at random and displays it, rotate, repeat. Like I said, it works great.

The problem? I don't want it to be random any more. I just want it to scroll through the divs one at a time and display them then start over at 1 when it reaches the end.

What do I re-write to make it stop being random? I know WHERE, I just don't know HOW. Everything I have tried breaks it all together.

Help?

[Nile]

I'm not that good at js, but wouldn't it be:

setTimeout(showDiv(),8000);

[BLiZZaRD]

That won't remove the randomization though...

[Nile]

But wouldn't it be like that though?

[zaphod42]

maybe this will work?

divs = ['d1','d2','d3','d4','d5'];
thisDiv=1;

function hideDivs() {
 for (i=0; i<divs.length; i++){
  document.getElementById(divs[i]).style.display = 'none';
 }
}

function showDiv(){

 if(thisDiv<=divs.length){
  hideDivs();
  document.getElementById(divs[thisDiv]).style.display = 'block';
  thisDiv++;

  if(thisDiv>divs.length){
   thisDiv=1;
  }
 }
}

[zaphod42]

oops, and of course you will still need your setTimer(showDiv(),8000)

[BLiZZaRD]

That was close enough for me to get it working.

divs = ['d1','d2','d3','d4','d5'];
thisDiv=0;

function hideDivs() {
 for (i=0; i<divs.length; i++){
  document.getElementById(divs[i]).style.display = 'none';
 }
}

function showDiv(){

 if(thisDiv<=divs.length){
  hideDivs();
  document.getElementById(divs[thisDiv]).style.display = 'block';
  thisDiv++;

  if(thisDiv==divs.length){
   thisDiv=0;
  }
 }
setTimeout(showDiv,8000); //set a delay before showing the next div
}

Just made the 3 slight changes in red. Leaving the div # at 1 instead of 0 made it skip the first one completely.

Then it didn't return to the first div it stopped after reaching the last.

Changes the > to == in the show function and it loops now

Perfect! thanks!

[Bob90]

I think it's simpler.

divs = ['d1','d2','d3','d4','d5'];
thisDiv=0;

function hideDivs() {
 for (i=0; i<divs.length; i++){
  document.getElementById(divs[i]).style.display = 'none';
 }
}

function showDiv(){

 if(thisDiv<=divs.length){
  hideDivs();
 document.getElementById(divs[thisDiv%divs.length]).style.display = 'block';
  thisDiv++;

 }
setTimeout(showDiv,8000); //set a delay before showing the next div
}

Thinking about it, shouldn't the setTimeout be replaced by a setInterval that is outside of the function. That would allow you to stop calling the function if you wanted.

Just my 2 cents/pence.

[jscheuer1]

Good point Bob90, might as well declare an object and be specific when creating variables though to protect the global environment:

var showDiv={
divs:['d1','d2','d3','d4','d5'], //Set divisions
i:3000, //Set Interval
c:0,t:0,
hide:function(){
 for (var i=0; i<this.divs.length; i++)
  document.getElementById(this.divs[i]).style.display = 'none';
},
doIt:function(){
this.hide();
 document.getElementById(this.divs[this.c%this.divs.length]).style.display = 'block';
  this.c++;
},
init:function(){
clearInterval(this.t);
var o=this, g=function(){o.doIt();};
g();
o.t=setInterval(g, o.i);
}
};
showDiv.init();

With setInterval, as Bob90 suggests, it can now be turned on and off. This will stop it:

clearInterval(showDiv.t);

This starts/resumes it:

showDiv.init();