jQuery News Scrollers and Tickers with a ListView

The jQuery Cycle plug-in is most often used for creating image slide shows. However, it's just as easy to use to create a news scroller from a ListView. Here, I look a doing just that. I also look at an alternative jQuery plug-in (NewsTicker) that gives the effect of the classic BBC News Ticker.

jQuery Cycle has been round for quite a while, but the vast majority of demos and samples show it being used to display image slideshows. But it is also capable of performing its magic on any set of elements. Headlines are commonly presented as an unordered list of items, and the ListView server control allows for just the right amount of control over html output that working with jQuery plug-ins and ListViews is pretty simple.

We'll have a look at the code-behind for the page first. As a data source for the headlines, I will be using my own RSS feed. This could just as easily be a DataTable from a SQL query or any other collection. I set up a little class to hold each news item:


public class News
{
  public string Url { get; set; }
  public string Headline { get; set; }
  public string Intro { get; set; }
  public DateTime DatePosted { get; set; }
}

And then I create a List<News> by querying the RSS feed in Page_Load():


var file = "http://www.mikesdotnetting.com/rss";
var xml = XDocument.Load(file);
var news = xml.Descendants("item")
  .Select(story => new News
                  {
                    Url = (string)story.Element("link"),
                    Headline = (string)story.Element("title"),
                    DatePosted = (DateTime)story.Element("pubDate")
                  }).ToList();

In the Web Form itself, I have added a ListView:

  

<div id="news1">
    <p class="headlines">
      Fader:
    </p>
    <asp:ListView ID="HeadlineFader" runat="server" EnableViewState="false">
      <LayoutTemplate>
        <ul id="newsfade">
          <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
        </ul>
      </LayoutTemplate>
      <ItemTemplate>
        <li class="newsitems">
          <asp:HyperLink ID="NewsLink" runat="server" 
            NavigateUrl='<%# Eval("Url") %>'
            Text='<%# Eval("Headline")%>' />
        </li>
      </ItemTemplate>
    </asp:ListView>
  </div>


And I have also referenced a couple of javascript files in the <head> area of the document:

  

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.cycle.all.min.js" type="text/javascript"></script>


The second of these is the jQuery Cycle plugin. This plugin has a lot of options, and is pretty mature. For this example, I am going to show the headlines appearing one at a time, but fading out when each one is replaced by the next one. So the first thing I need to do is to bind my List<News> to the ListView in the Code Behind:


HeadlineFader.DataSource = news;
HeadlineFader.DataBind();

Then I need to switch back to the aspx file, and add the following to the <head> area:

  

<script type="text/javascript">
    $(document).ready(function () {

      $('ul#newslist').cycle({
        fx: 'fade',
        speed: 300,
        timeout: 2500
      });
    });
</script>


Having "pointed" the plug in to the unordered list that the ListView will generate and telling it to perform its operations on that ($('ul#newslist').cycle()), I have set 3 options. The first is the effect, which in this case is fade. Other effects are detailed in the documentation. The speed option allows me to define how quickly the fade should act, and the timeout option controls the display duration for each item. All that's needed now is some CSS to line everything up nicely:


body 
{
  font-size: 75%;
  font-family: Verdana;
}
#news1
{
  padding: 20px;
}
#newslist
{
  padding: 0;
  margin: 0;
  height: 20px;
  width: 500px;
  float: left;
}
.newsitems
{
  padding:0;
  margin:0;
}
.headlines
{
  width: 70px;
  float: left;
  padding: 0;
  margin: 0;
}
a
{
  text-decoration: none;
}



Another nice effect can be achieved using the sync and delay options:


$('ul#newsSlide').cycle({
  fx: 'scrollLeft',
  sync: 0,
  timeout: 3500,
  pause: 1
});

The fx value causes items to slide in from the right to the left. sync being 0 (false) ensures that each item waits until the preceding one has disappeared before sliding in. Finally the pause option will stop the animation if you hover your mouse over the headlines. The animation resumes when you move the mouse away.

The second plugin that I shall look at is the News Ticker. This produces the same effect as the javascript news ticker featured in one of my older articles, in that it displays each headline one at a time, but reveals them one letter at a time, giving the effect of the headline being typed live. You can see in the previous article how much client side code was needed to get this to work, but using the plugin is trivial. Keeping the same ListView as before, and having referenced the correct js file in the <head> section, this is all that's needed:


$(document).ready(function () {

  $().newsTicker({
    newsList: "ul#newslist",
    startDelay: 10,
    placeHolder1: " ",
    placeHolder2: "_",
    controls: false,
    stopOnHover: false
  });
});

The options are detailed in the documentation, but this plugin is lightweight on features, and easy to work with. In contrast to the Cycle plugin, the News Ticker is a one-trick pony. Minified, it's 6kb and it does it's one trick nicely. The Cycle plugin on the other hand is packed with options. But the documentation and demo pages are fantastic, so it is just as easy to work with as the News Ticker.

I've put together a download for this article, which was constructed in VS 2010 so you can play with some of the options and see some of the effects in action.

 

Date Posted: Friday, May 21, 2010 9:12 PM
Last Updated: Tuesday, November 11, 2014 8:10 AM
Posted by: Mikesdotnetting
Total Views to date: 19704

1 Comment

Wednesday, May 26, 2010 9:43 PM - jay

Great, thanks!
Add your comment

If you have any comments to make about this article, please use this form to do so. Make sure that your comment relates specifically to the article above. More general comments can be posted through the form on the Contact page.

Please note, all comments are moderated, and some may not be published. The kind of things that will ensure your comment is deleted without ever seeing the light of day are as follows:

  • Not relevant to the article
  • Gratuitous links to your own site or product
  • Anything abusive or libellous
  • Spam
  • Anything in a language I don't understand including gibberish.

I do not pass email addresses on to spammers, so a valid one will assist me in responding to you personally if required.

Recent Comments

Allen Michaels 12/17/2014 4:37 PM
In response to Cascading DropDownLists with jQuery and ASP.NET
Fantastic thank you so much!...

Emily 12/17/2014 12:36 PM
In response to Parameterized IN clauses with ADO.NET and LINQ
Thanks, very helpful!!!! Can i use this for multiple in's ????? IN (.....) and IN(...) and IN...

sss 12/16/2014 3:06 PM
In response to Solving the Operation Must Use An Updateable Query error
good...

Gjuro 12/15/2014 10:30 PM
In response to Examining the Edit Methods and Edit View
You have one fromr (and it should be from, I suppose). :-)...

Gjuro 12/15/2014 10:27 PM
In response to Adding Search
Hi, thnx for all this C#->VB translations. Yet, the following code block is (slightly) in error it a...

Scot 12/14/2014 1:39 PM
In response to Entity Framework 6 Recipe - Alphabetical Paging In ASP.NET MVC
Thanks,Mike I found solution....

Gjuro 12/13/2014 10:52 PM
In response to Accessing Your Model's Data from a Controller
The article mentions "Creating an Entity Framework Data Model for an ASP.NET MVC Application" (at is...

Samuel 12/13/2014 8:40 AM
In response to Displaying The First n Characters Of Text
I have failed to use the extension because it throws an error that it doesn't recognise the chop be...

Ignas 12/12/2014 5:11 PM
In response to Cleaner Conditional HTML Attributes In Razor Web Pages
Any suggestions for Html Helper elements with HtmlAttributes, when you need to conditionally set it...

Gautam 12/11/2014 8:50 PM
In response to Validation In Razor Web Pages 2
Hi Mike Is this required for V3, non html helper input...