Browse DevX
Sign up for e-mail newsletters from DevX


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

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.
   <title>News Rotator</title>
      text-decoration: none;
      text-decoration: underline;
   <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>
   <td><div id="stories" style="padding: 5px;
      text-align: center;"></div></td>

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.

Thanks for your registration, follow us on our social networks to keep up-to-date