Use jQuery and ASP.NET to Build a News Ticker

Introduction

This article is the first in a series that explores how to create your own news ticker widget using jQuery and ASP.NET. jQuery is a free, popular, open-source JavaScript library that simplifies many common client-side tasks, like event handling, DOM manipulation, and Ajax. This article kicks off the series and shows how to build a fairly simple news ticker whose contents can be specified statically in HTML markup or created dynamically from server-side code. Future installments will explore adding bells and whistles, such as: stopping the news ticker rotation when the mouse is hovered over it; adding controls to start, stop and pause the headlines; loading new headlines dynamically using Ajax; and packaging the JavaScript used by the ticker into a jQuery plugin.

Read on to learn more!

An Overview of the News Ticker's Functionality and Markup

<div class="ticker threeRows medium">    <ul id="latestNews3">       <li>          <div class="header">Politician schedules news conference</div>          <div class="body">Politician Joe Smith has assembled a news conference for this afternoon to apologize for some          indiscretion he had. This is Mr. Smith's third such "apology press conference" this year.</div>          <div class="footer">Published @ 8:30 AM</div>       </li>             <li>          <div class="header">Study links unhealthy food to unhealthy people</div>          <div class="body">A recent study by some doctors somewhere showed a strong correlation between unhealthy eating          and unhealthy people. More studies are to be performed to verify these findings.</div>          <div class="footer">Published @ 9:00 AM</div>       </li>       ...    </ul> </div>

Each <li> element represents a headline and can have any HTML you like. In the above example I have three <div> elements in each headline with different CSS classes - header, body, and footer - for formatting the headline's header, body, and footer text. You could add images or replace the <div>s with just text. And while not shown in the sample above, you can certainly add hyperlinks to the markup in the <li> elements.

A news ticker may have an arbitrary number of headlines; however, only a specified number of them are shown at any given time. Every so often, the topmost headline is faded out and the next not-shown headline is displayed. Consider a news ticker with six headlines that is configured to display three headlines at a time and to show each headline for five seconds. Such a ticker would initially show just the first three headlines, like so:

• Headline 1
• Headline 2
• Headline 3

• Headline 2
• Headline 3
• Headline 4

• Headline 4
• Headline 5
• Headline 6

• Headline 5
• Headline 6
• Headline 1

Starting the News Ticker and Specifying the Number of Items to Display and the Duration

• startTicker(id, numberToShow, duration) - call this function when the page loads to convert an unordered list into a news ticker.
• rotateTicker(id) - this function is automatically invoked every duration number of milliseconds and is responsible for fading out the first list item, removing it from the unordered list, and then adding it to the bottom of the list. You would not call this function directly.

The demo available for download at the end of this article includes a page named SimpleTicker.aspx. There you'll find two news tickers: one that displays a short textual headline and shows only one headline at a time, and a second one that displays a more detailed headline and shows three at a time. Let's look at each one of these tickers.

The abbreviated markup for the headlines for the first ticker (the one that shows one headline at a time) follows:

<div class="ticker stretched">    <ul id="latestNews1">       <li>          <div class="body">Politician Joe Smith has assembled a news conference for this afternoon to apologize for some          indiscretion he had. This is Mr. Smith's third such "apology press conference" this year.</div>       </li>       <li>          <div class="body">Did you know that you can play the fun (and addictive!) board game          Axis & Allies online? Head on over to <a target="_blank" href="http://gamesbyemail.com/Games/WW2">http://gamesbyemail.com/Games/WW2</a>          and give it a whirl!</div>       </li>       ...    </ul> </div>

For starters, note the <div> element encasing the <ul>. The <div> element is assigned two CSS classes. These classes are defined in the NewsTicker.css file and causes the ticker to have a light gray background and to be stretched across the width of its parent element. Each individual headline has a <div> element assigned the CSS class body, which displays the text in an 8pt font.

With this markup and nothing else, all six list items would be displayed and there would be no cycling through the items over time. To have it display just one headline and to have a new one cycled in every five seconds, say, we need to call the startTicker function in the $(document).ready event handler:

<script type="text/javascript">    $(document).ready(function() {       startTicker('#latestNews1', 1, 5000);    }); </script>

Note: In addition to the above JavaScript, you'll also need to reference the jQuery library and ticker.js script file for the above script to work. In the demo application these script references are located in the master page, Site.master.

With the above markup and script in place, visiting the page displays the unordered list as a single line, showing the first list item as the headline.

After five seconds, the first headline fades out and the second one appears.

The news ticker that shows three items at a time has a similar setup as the single headline ticker. We already say its headline markup (refer back to the first code listing in this article). For this news ticker we show more details with each item, including a header and the time it was published. Also, three headlines are shown at a time. Because we want to show three headlines at a time (instead of one) we pass in different input parameters to the startTicker function:

<script type="text/javascript">    $(document).ready(function() {       startTicker('#latestNews1', 1, 5000);       startTicker('#latestNews3', 3, 5000);    }); </script>

The result is a news ticker with three items displayed at once. Just like with the single item news ticker, every five seconds the top-most headline fades out and the next three are displayed.

Creating the Headlines from Server-Side Code

The DynamicTicker.aspx demo displays the most recent tweets from my Twitter account (@ScottOnWriting) in the news ticker format. Every Twitter account has an RSS feed that returns the most recent tweets for a particular user. The DynamicTicker.aspx demo retrieves this RSS feed using the SyndicationFeed class and binds the resulting items to a ListView, which emits the appropriate unordered list markup.

Let's start by looking at the ListView markup. The ListView contains a LayoutTemplate that creates an unordered list with an id of tweets. The contents of the unordered list are generated by the ItemTemplate, which creates an <li> element that displays the tweet text (Eval("Summary.Text")) and the date the tweet was made (Eval("PublishDate.DateTime")). These two inputs are passed into formatting methods - FormatSummary and FormatPubDate - which are both defined in the code-behind class and tidy up the output for display.

<asp:ListView ID="lvTweets" runat="server">    <LayoutTemplate>       <div class="ticker twoRows medium">          <ul id="tweets">             <asp:PlaceHolder runat="server" ID="itemPlaceholder" />          </ul>       </div>    </LayoutTemplate>           <ItemTemplate>       <li>          <div class="header" style="font-weight: normal">             <%#FormatSummary(Eval("Summary.Text").ToString())%>          </div>          <div class="footer">Tweeted @ <%# FormatPubDate(Convert.ToDateTime(Eval("PublishDate.DateTime")))%></div>       </li>    </ItemTemplate> </asp:ListView>

In addition to the ListView markup we also need to call the JavaScript startTicker function when the document loads. Here we configure it to show two tweets at a time for four and a half seconds.

<script type="text/javascript">    $(document).ready(function() {       startTicker('#tweets', 2, 4500);    }); </script>

The page's code-behind class contains a Page_Load event handler and the two formatting methods, FormatSummary and FormatPubDate. The Page_Load event handler starts by getting my recent tweets, which are accessible as an RSS feed at the URL http://twitter.com/statuses/user_timeline/174828949.rss. As discussed in How to create a syndication feed for your website, the .NET Framework's SyndicationFeed class makes it a cinch to work with RSS feeds. As the code shows below, you can read an entire RSS feed from an external URL in one line of code. Once this RSS feed has been read, its items are bound to the ListView.

Each tweet returned by the RSS feed starts with my Twitter user name, ScottOnWriting. For example, if I tweet, "ASP.NET is fun," the RSS feed will report the tweet as "ScottOnWriting: ASP.NET is fun." The FormatSummary formatting method strips out this header text and returns just what follows it. The FormatPubDate method takes the date and time the tweet was made and formats it to show the hour, minute, abbreviated month name, and day of month. (See Formatting Dates, Times and Numbers in ASP.NET for more information on how to format dates.)

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load    'Get the latest syndicated content from my Twitter feed!    Dim myTweets As SyndicationFeed = SyndicationFeed.Load(XmlReader.Create("http://twitter.com/statuses/user_timeline/174828949.rss"))    'Bind myTweets to the ListView    lvTweets.DataSource = myTweets.Items    lvTweets.DataBind() End Sub Protected Function FormatSummary(ByVal summary As String) As String    Const SummaryHeader As String = "ScottOnWriting: "    'Remove the leading "ScottOnWriting: "    If summary.StartsWith(SummaryHeader) Then       Return summary.Substring(SummaryHeader.Length)    End If End Function Protected Function FormatPubDate(ByVal pubDate As DateTime) As String    Return pubDate.ToString("h:mm, MMM d") End Function

That's all there is to it! With just a few lines of server-side code and with just a touch of markup in the ListView's templates, we have a news ticker that shows my latest tweets. Of course, you are not limited to just displaying tweets as the headlines in your news ticker. Rather, you can show any content that you can pull from any source, be it from a database, RSS feed, XML file, or any other store.

Conclusion and Looking Forward...

Until then... Happy Programming!