Rotate Content Easily with Object-Oriented JavaScript-2 : Page 2

by Tom Duffy

Sep 10, 2003

Page 2 of 5

Create an HTML Page to Hold Rotating Content
To begin, you need an HTML page where you can experiment with rotating content. You can use the following simple page use the following code as a base HTML page for the sample project described in this solution. Open your favorite text editor and enter the following code.

<html>
   <head>
   <title>News Rotator</title>
   <style>
   a{
      text-decoration: none;
   }
   a:hover{
      text-decoration: underline;
   }
   </style>
   </head>
   <body>
   <div id="news" style="width: 140px">
   <table cellpadding="0" cellspacing="0" width="140" 
      height="150" style="border: 1px rgb(254,189,45) 
      solid; font: 9pt Verdana;font-weight: bold;">
   <tr style="height:14pt; width: 140;">
   <td style="background-color: rgb(254,189,45); 
      padding: 5px; text-align: center;">Today's News</td>
   </tr>
   <tr>
   <td><div id="stories" style="padding: 5px;
      text-align: center;"></div></td>
   </table>
   </div>
   </body>
   </html>

The code used in this solution creates a news application, but the metaphor works equally well for any type of information your application requires. The only notable code in the HTML file is the <div> tag that holds a list of news stories—that's where you'll write the rotating content dynamically. Save the file as news.htm.

« Previous Page 123 4 5 Next Page »

0 Comments (click to add your comment)

Comment and Contribute