Introduction to the JavaScript Content Rotator
Recently I have been exploring some simple JavaScript solutions for fitting more content into limited space. My Image Scrollbar and Image Scrollbar with Viewer articles illustrate a great way to condense images and even text into a small space.
In this article I will explore another simple space-saving solution, the JavaScript content rotator. The rotator features the ability for the user to mouse over the rotating content and freeze the rotation allowing the user to examine the content as long as they like. The topics covered in this project include the display style, getElementById, setAttribute, setTimeout, onmouseover and onmouseout.
The Code
<html > <head> <title>Content Rotator Example</title> </head> <script language="javascript" type="text/javascript"> // Our tracking variables var contentAreas = 3; // Total number of content areas in rotation var contentIndex = 1; // Keeps track of which content area is currently being displayed var continueRotation = 0; // Used to track whether rotation is currently on or off var rotationInProgress = 0; // Used to track when we are on delay before rotateContent is executed var changeDelay = 2000; // in milliseconds // This function hanles all of the content rotation function rotateContent(){ if (continueRotation == 1) { var contentAreaID = 'contentArea' + contentIndex; // Turn off current content area document.getElementById(contentAreaID).setAttribute('style','display: none') // Turn on next content area if (contentIndex == contentAreas) { // Roll back to the first area contentIndex = 1; } else { contentIndex = contentIndex + 1; } contentAreaID = 'contentArea' + contentIndex; document.getElementById(contentAreaID).setAttribute('style','display: inline') // Call the rotation function again with the delay interval we defined above setTimeout("rotateContent()",changeDelay); // Rotation continues, set rotationInProgress rotationInProgress = 1; } else { // Rotation is stopped, reset rotationInProgress rotationInProgress = 0; } } // This starts/restarts the content rotation function rotationStart() { continueRotation = 1; // Only call the rotation function when we are not // in the middle of a rotation delay if (rotationInProgress == 0) { rotationInProgress = 1; setTimeout("rotateContent()",changeDelay); } } // This stops the content rotation function rotationStop() { // Stop rotation by setting the continueRotation flag to zero continueRotation = 0; } </script> <body onload="javascript:rotationStart()"> <table border="0" cellpadding="5" cellspacing="0" style="width: 410px; height: 600px"> <tr> <td style="width: 50px; height: 50px; background-color: black"> </td> <td style="width: 310px; height: 50px; background-color: black; text-align: center"> <span style="font-size: 24pt; color: #ffff66">My Content Slide Show</span></td> <td style="width: 50px; height: 50px; background-color: black"> </td> </tr> <tr> <td style="width: 50px; height: 50px; background-color: black"> </td> <td style="width: 310px; height: 500px; text-align: center" onmouseover="rotationStop();" onmouseout="rotationStart();"> <table id="contentArea1" border="0" cellpadding="2" cellspacing="0" style="width: 300px; display:inline; position:relative;"> <tr> <td style="text-align: center"> <span style="font-size: 16pt"><strong>Grasslands</strong></span></td> </tr> <tr> <td> <img height="300" src="http://cache4.asset-cache.net/xc/sb10069137p-001.jpg?v=1&c=IWSAsset&k=2& d=8A33AE939F2E01FF64B2B2573E90E1541C8B733DE2CC979414FD0B94817AE1EA491BA17D91A07709" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;border-bottom: 1px solid" width="300" /> </td> </tr> <tr> <td style="text-align: left"> This some text about the Grasslands image above. This caption can be as long as you want it to be.</td> </tr> </table> <table id="contentArea2" border="0" cellpadding="2" cellspacing="0" style="width: 300px; display:none; position:relative;"> <tr> <td style="text-align: center"> <span style="font-size: 16pt"><strong>Tree Canopy</strong></span></td> </tr> <tr> <td> <img height="300" src="http://cache3.asset-cache.net/xc/200279134-001.jpg?v=1&c=IWSAsset&k=2& d=50DD27FD4F7A6F9C59C56356C5A8832A0E2334C49255C574E74CC28F6DADD51BE1E50A2C30CF8D38" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;border-bottom: 1px solid" width="300" /> </td> </tr> <tr> <td style="text-align: left"> This some text about the Tree Canopy image above. This caption can be as long as you want it to be.</td> </tr> </table> <table id="contentArea3" border="0" cellpadding="2" cellspacing="0" style="width: 300px; display:none; position:relative;"> <tr> <td style="text-align: center"> <strong><span style="font-size: 16pt">Mountain Clouds</span></strong></td> </tr> <tr> <td> <img height="300" src="http://cache4.asset-cache.net/xc/sb10069137b-001.jpg?v=1&c=IWSAsset&k=2& d=EDF6F2F4F969CEBD84070F63FAB363D11C8B733DE2CC9794D0C71D942779DC92491BA17D91A07709" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;border-bottom: 1px solid" width="300" /> </td> </tr> <tr> <td style="text-align: left"> This some text about the Mountain Clouds image above. This caption can be as long as you want it to be.</td> </tr> </table> </td> <td style="width: 50px; height: 500px; background-color: black"> </td> </tr> <tr> <td style="width: 50px; height: 50px; background-color: black"> </td> <td style="width: 310px; height: 50px; background-color: black"> </td> <td style="width: 50px; height: 50px; background-color: black"> </td> </tr> </table> </body> </html>