HTML
  Home arrow HTML arrow Page 2 - Preloading HTML Content with CSS
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Moblin 
JMSL Numerical Library 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
HTML

Preloading HTML Content with CSS
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 29
    2005-01-12

    Table of Contents:
  • Preloading HTML Content with CSS
  • Rotating HTML content with JavaScript
  • Hiding HTML content with CSS
  • Building a HTML content rotator with CSS
  • Building a simple drop-down menu with CSS
  • Code explanation to the rescue

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Preloading HTML Content with CSS - Rotating HTML content with JavaScript


    (Page 2 of 6 )

    Let’s say we have a set of messages for displaying in sequence, being commonly implemented as a JavaScript function, where each message is stored in an array structure and displayed one at a time. A typical solution might be coded in the following manner, first defining the JavaScript functions:

    <script language="javascript">
    // loads global functions
    loadGlobalFunctions=function(){
     // rotates contents every 5 seconds
     rotateContent=function(){
      i++;
      if(i==message.length){i=0}
      container.innerHTML=message[i];
      setTimeout('rotateContent()', 5*1000);
     }
     // defines messages array
     var message=new Array();
     message[0]='<a href="http://www.google.com">Google takes you where you want!</a>';
     message[1]='<a href="http://www.devshed.com">Looking for high quality content? Visit Devshed.com now!</a>';
     message[2]='<a href="http://www.devarticles.com">Need for web development articles? Go Devarticles.com!</a>';
     var i=0;
     var container=document.getElementById('container');
     // execute rotateContent function
     rotateContent();
    }
    // execute code once page is loaded
    window.onload=loadGlobalFunctions;
    </script>

    Nowt, we define our CSS declarations and HTML, respectively:

    <style type="text/css">
    .regular {
     font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
     color: #000;
    }
    </style>

    <p class="regular">Regular Content</p>
    <br />
    <div id="container" class="regular"></div>

    Let’s break down the above script to understand how it works. In fact, it’s quite simple.

    First, we defined the rotateContent() function, which takes care of transferring the content of each message, stored in the messages array, to a containing <div> element that will display them in turn.
    We set a time interval of five seconds to show the content sequentially, only for example purposes. Then, we grasped the container <div> as an object and manipulated its content via the innerHTML property, which allows us to display each message alternatively.

    Please note the line <div id="container" class="regular"></div>. It has no structural value, but refers to the containing <div> for displaying HTML content.

    Finally, the script is executed once the page is loaded.

    The working example can be viewed here: Example1

    The complete code for this content rotator is as follows:

    <html>
    <head>
    <title>CONTENT ROTATOR EXAMPLE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="javascript">
    // loads global functions
    loadGlobalFunctions=function(){
     // rotate contents every 5 seconds
     rotateContent=function(){
      i++;
      if(i==message.length){i=0}
      container.innerHTML=message[i];
      setTimeout('rotateContent()', 5*1000);
     }
     // defines messages array
     var message=new Array();
     message[0]='<a href="http://www.google.com">Google takes you where you want!</a>';
     message[1]='<a href="http://www.devshed.com">Looking for high quality content? Visit Devshed.com now!</a>';
     message[2]='<a href="http://www.devarticles.com">Need for web development articles? Go Devarticles.com!</a>';
     var i=0;
     var container=document.getElementById('container');
     // execute rotateContent function
     rotateContent();
    }
    // execute code once page is loaded
    window.onload=loadGlobalFunctions;
    </script>
    <style type="text/css">
    .regular {
     font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
     color: #000;
    }
    </style>
    </head>
    <body>
    <p class="regular">Regular Content</p>
    <br />
    <div id="container" class="regular"></div>
    </body>
    </html>

    As we can see with this approach, since all the messages are stored in variables, adding and updating content is an extremely cumbersome task. This old fashioned solution might be noticeably improved with the assistance of CSS for hiding regular HTML by using the capabilities of the CSS attribute display, as we’ll see in the next section.

    More HTML Articles
    More By Alejandro Gervasio


       · But two things should be considered:1) Don't hide things with CSS and show them...
       · I agree with you about your points 1-2. The subject of this article was showing an...
       · Well, that a lot of sites fail is not a reason to keep it that way. In fact,...
       · Hi again,You're correct about that. I'm on the side of doing web development the...
     

    HTML ARTICLES

    - Completing Construction of a Database Form w...
    - Maximizing and Restoring Images in a Tabular...
    - Building the Recordset for an HTML Database ...
    - Laying Out a Database Form with HTML
    - Tabular Database Form Functions with HTML
    - Tabular Database Forms with HTML
    - Using the Find Functions for HTML Database F...
    - Sorting for Database Forms with HTML
    - Edit and Other Database Form Functions with ...
    - More Database Form Functions with HTML
    - Database Form Functions with HTML
    - Using the HTML Table Element as a Recordset
    - Building Single Row Database Forms with HTML
    - Introduction to Database Forms with HTML
    - Another Look at Animation of Geographical Ma...






    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway
    Stay green...Green IT