Home arrow HTML arrow Page 4 - Preloading HTML Content with CSS
HTML

Preloading HTML Content with CSS


Website designers often use JavaScript to expose dynamic content to visitors. Sadly, updating JavaScript can be painful at best. CSS can help to overcome JavaScript's limitations -- and the two together open up some lovely possibilities. Alejandro Gervasio explains, with dynamic examples.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 48
January 12, 2005
TABLE OF CONTENTS:
  1. · Preloading HTML Content with CSS
  2. · Rotating HTML content with JavaScript
  3. · Hiding HTML content with CSS
  4. · Building a HTML content rotator with CSS
  5. · Building a simple drop-down menu with CSS
  6. · Code explanation to the rescue

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials