Preloading HTML Content with CSS - Building a HTML content rotator with CSS
(Page 4 of 6 )
A wide variety of content rotators are present on websites, which very often offer content on demand. As mentioned above, we’ll create a client–side content version by utilizing the CSS approach and the power of JavaScript. So, with the preliminaries out of the way, let’s write a little bit of code, presenting a new improved version of the content rotator. Here are the JavaScript functions:
<script language="javascript">
// loads global functions
loadGlobalFunctions=function(){
// rotates dynamic content every 2 seconds
rotateContent=function(){
i++;
if(i==hiddenDivs.length){i=0}
container.innerHTML=hiddenDivs[i].innerHTML;
setTimeout('rotateContent()', 2*1000);
}
// gets all <div> elements
divs=document.getElementsByTagName('div');
hiddenDivs=[];
// makes array of <div> elements with class name 'hidden'
for(i=0;i<divs.length;i++) {
if(/\bhidden\b/.test(divs[i].className)){
hiddenDivs[hiddenDivs.length]=divs[i];
}
}
var i=0;
// puts dynamic content into cointaning <div> element
var container=document.getElementById('container');
// executes rotateContent function
rotateContent();
}
// executes code once page is loaded
window.onload=loadGlobalFunctions;
</script>
And following, the CSS declarations and HTML markup:
<style type="text/css">
.hidden {
display: none;
}
h2 {
font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
}
</style>
<div class="hidden"><h2>Frame 1</h2><img src="i1.jpg" alt="" width="120" height="200" /></div>
<div class="hidden"><h2>Frame 2</h2><img src="i2.jpg" alt="" width="120" height="200" /></div>
<div class="hidden"><h2>Frame 3</h2><img src="i3.jpg" alt="" width="120" height="200" /></div>
<div class="hidden"><h2>Frame 4</h2><img src="i4.jpg" alt="" width="120" height="200" /></div>
<h2 class="regular">Regular Content</h2>
<div id="container" class="regular"></div>
Let’s see in detail how this works:
As usually, we first define our JavaScript functions. The rotateContent() function behaves similarly to the old fashioned example, but this time there are significant differences. First we iterate over the <div> elements present in the document. Once all of the <div> elements with the “hidden” class name attribute have been stored as an array, the script takes care of putting in turn the content of each hidden <div> into the containing <div>, using the innerHTML property. Then it effectively rotates the content of all the hidden divs.
The rotating process is tackled by a function which changes the contents every two seconds, according to the example. All the code is executed when the page finishes loading.
Next, we have declared our "hidden" class in the CSS, and redefined the <h2> header to achieve a styled version. Feel free to include any rule that you might want to use.
In our markup, we’ve defined four hidden <div> elements, which will be hidden from view initially. Within the divs, we have included several elements, such as <h2> headers and some images. Once again feel free to include anything you want. Finally the containing <div> is added, with no structural value, but useful for showing dynamic content.
The working example can be viewed here: Example2
The full code for the content rotator is listed below:
<html>
<head>
<title>IMPROVED CONTENT ROTATOR EXAMPLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
// loads global functions
loadGlobalFunctions=function(){
// rotates dynamic content every 2 seconds
rotateContent=function(){
i++;
if(i==hiddenDivs.length){i=0}
container.innerHTML=hiddenDivs[i].innerHTML;
setTimeout('rotateContent()', 2*1000);
}
// gets all <div> elements
divs=document.getElementsByTagName('div');
hiddenDivs=[];
// makes array of <div> elements with class name 'hidden'
for(i=0;i<divs.length;i++) {
if(/\bhidden\b/.test(divs[i].className)){
hiddenDivs[hiddenDivs.length]=divs[i];
}
}
var i=0;
// puts dynamic content into cointaning <div> element
var container=document.getElementById('container');
// executes rotateContent function
rotateContent();
}
// executes code once page is loaded
window.onload=loadGlobalFunctions;
</script>
<style type="text/css">
<!--
.hidden {
display: none;
}
h2 {
font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
}
-->
</style>
</head>
<body>
<div class="hidden"><h2>Frame 1</h2><img src="i1.jpg" alt="" width="120" height="200" /></div>
<div class="hidden"><h2>Frame 2</h2><img src="i2.jpg" alt="" width="120" height="200" /></div>
<div class="hidden"><h2>Frame 3</h2><img src="i3.jpg" alt="" width="120" height="200" /></div>
<div class="hidden"><h2>Frame 4</h2><img src="i4.jpg" alt="" width="120" height="200" /></div>
<h2 class="regular">Regular Content</h2>
<div id="container" class="regular"></div>
</body>
</html>
</html>
At first glance, we’ve not gone so far as to make something different from the initial example. Take another look. Since we’re fetching content from the “hidden” divs and not directly from JavaScript variables, the process of adding or updating dynamic content is fairly easy. It’s just a matter of adding or replacing content within the hidden divs, and we’re done. With a simple Content Management System we might quickly add elements to the selected hidden sections, and voila! We have fresh rotating content on our site. Pretty easy, right?
Next, we’re going to employ the same technique to create a simple drop-down menu, with minimal effort.
Next: Building a simple drop-down menu with CSS >>
More HTML Articles
More By Alejandro Gervasio
/ 29 
