Headline Rotator

For our first rotator example, we’ll take a news feed and scroll the headlines, along with an excerpt of the article, one at a time into view. Unlike with the typical news ticker, however, each news item will scroll up, not across. Then it will pause for a few seconds before it continues up and out of sight while the next one scrolls into view.

Setting Up the Page

At its most basic level, this feature is not very difficult to implement. But as we will soon see, making it production-ready requires a bit of finesse.

We begin, as usual, with a chunk of HTML. We’ll place the news feed in the sidebar of the page:

<div id="sidebar">

  <!-- Code continues... -->
          <h3>Recent News</h3>
<div id="news-feed">
<a href=news/index.html>News Releases</a>
</div></div>

So far, the news-feed <div> contains only a single link to the main news page. This is our fall back position, in case the user does not have JavaScript enabled...