Cycling DIVs on a web page

Just before my boys were born, I installed a Foscam IP Camera on the ceiling of their room.  I have enjoyed being able to check on the boys as they're napping or sleeping in their cribs.  The model I got has pan/tilt capabilities and a microphone built in.  So, I can hear them breathing or crying and focus on one or the other.  I can do all this without opening their door.  Also, since it's mounted on the ceiling, they don't ever notice it.  It's equipped with a bank of IR LEDs around the lens that turn on whenever the room is too dark, so I can even look in on them when their room is completely dark.  I found a decent iPhone app that allows me to connect to the camera.  I could even hook up some speakers to the camera and use a feature of the app to talk to the boys in their room.  Not much different than a baby monitor.

Since then, a three pack of outdoor cameras went on sale so I went ahead and purchased them.  I mounted them on my front porch, and the back corner of the house overlooking the back door and the sideyard approaching the gate.  The cameras have motion detection and automatic file uploading, so I get a picture every time the lawn guys approach the gate and any time a solicitor approaches the front door.  I also built a simple html page displaying the feed from all four cameras on one page.  Unfortunately, at the highest resolution (and why wouldn't I want the highest resolution?) the four feeds don't show up on a single page unless i scale the page to 75%.  This is easy to do and Chrome even remembers that when I am looking at that page to automatically scale it down to 75%.  This has worked well, but I've always wanted a better way.

Yesterday, I finally got the tricky parts of what I really wanted to do worked out.  The goal was to have a web page that would show all four feeds but only show one at a time.  The page should cycle through each video feed and stay on it for a few seconds before moving on to the next feed.  You wouldn't expect this to be too difficult and in the end, it really wasn't.  This is the first version and the intent of this post is not to show the finished code for my page but to show how DIV elements on a web page can be cycled.

To start with, here is the html page with the DIV elements:
<div id="containerDiv2"> <div id="Div1" style="display:block;"> Div1</div> <div id="Div2" style="display:none;"> Div2</div> <div id="Div3" style="display:none;"> Div3</div> <div id="Div4" style="display:none;"> Div4</div> </div>

In my situation, each DIV contains the code to display the video feed from a single camera. The first DIV starts out visible while the rest are hidden. This doesn't really matter since the first time the javascript runs it will reset everything anyway. Technically, all four DIVs could start out hidden or displayed.

Here is the javascript code itself.  The comments should make it pretty self explanatory.  The very bottom starts the function running.  At the end of the function, the setTimeout command instructs the browser to call the function again after 1000 seconds.  This could be modified to read from an input box so that the user can adjust the cycle speed.  I guess i could look for some gauges out there to make it pretty. <div id="nextdiv" style="display:none;"> 0</div> <script> var containerDiv = document.getElementById("containerDiv2"); //specifies the container of the divs to cycle var innerDivs = containerDiv.getElementsByTagName("DIV"); //grabs an array of each of the divs var numdivs=innerDivs.length; //gets the total number of divs (affects rollover) function switchdivs() { //function to switch to the next div var nextdiv=document.getElementById("nextdiv").innerHTML //grabs the index of the div to display next nextdiv=parseInt(nextdiv); //converts the nextdiv index to an actual number (instead of a string) for(var i=0; i<innerDivs.length; i++){ //loops through each div in the container if(i==nextdiv){ innerDivs[i].style.display="block"; //if the current index is the index //of the nextdiv, display it } else { innerDivs[i].style.display="none"; //if the current index is not the index //of the nextdiv, hide it } } nextdiv=nextdiv+1; //increment the nextdiv index if(nextdiv==numdivs){nextdiv=0;} //if the currentdiv is the last one, roll over to the beginning document.getElementById("nextdiv").innerHTML=nextdiv; //store the nextdiv value in the hidden div for use next time var keepgoing=setTimeout("switchdivs()",1000); //set the function to repeat after 1000 seconds } window.onload=switchdivs(); //start the function switchdivs() for the first time </script> I had to get a little sloppy by storing the next div index in a hidden div. This was the easiest way that I as a non-programmer could avoid problems with global vs. local variables in the function. Theoretically, this could be used for any number of DIVs within the container DIV.  There are some fun transition effects available in the webkit and through CSS3, but like I said, that's not what this post is about.

Thanks to SirLagz for helping me debug my code and check my syntax (it's amazing what a missing double quote will do)!