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>
