PDA

View Full Version : Help with the rotating js file?



BLiZZaRD
02-29-2008, 07:40 PM
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
02-29-2008, 08:38 PM
I'm not that good at js, but wouldn't it be:

setTimeout(showDiv(),8000);

BLiZZaRD
02-29-2008, 08:42 PM
That won't remove the randomization though...

Nile
02-29-2008, 08:44 PM
But wouldn't it be like that though?

zaphod42
02-29-2008, 09:04 PM
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
02-29-2008, 09:05 PM
oops, and of course you will still need your setTimer(showDiv(),8000)

BLiZZaRD
02-29-2008, 09:31 PM
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 :D

Perfect! thanks!

Bob90
03-03-2008, 02:46 PM
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
03-03-2008, 03:58 PM
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();