Friday, March 29, 2024

Web Developer Class: Build Your Own JavaScript Content Rotator

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>

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured