CNN Style Scrolling Ticker with the Marquee Toolkit Control
I was browsing ajaxrain's catalog yesterday and I cam across a pretty nifty jquery plugin called liScroll that allows you to turn an ordinary HTML UL/LI into a scrolling ticker. Besides scrolling the items from right to left, the liScroll plugin supports two additional features
- It allows you to specify the scrolling speed by changing the value of the travelocity parameter
- The scrolling automatically pauses when you mouse over it
After seeing the liScroll demo, I was certain that this was something I could use for some of the sites I am working on. So I decided to see what it would take to implement a scrolling ticker control using the AJAX Control Toolkit. In addition to the liScroll features listed above, I also wanted to incorporate a few other enhancements, including
- Support both left-to-right and right-to-left scrolling directions
- Support applying a CSS class to the item when it is moused over
- Support dynamically repopulating the marquee after it has finished scrolling
So I created a new AJAX Control Toolkit control called the MarqueeControl that supports all of these features. To show off how it works I created a demo page that uses the MarqueeControl to display the most recent links from a few of of EPSN.com and CNN.com most popular RSS feeds. The screen shot of the demo is below, but it is sort of hard to see how the scrolling works from a screen shot, so I recommend you check it out on the live demo site.
The Marquee Script Control
If you have worked with the AJAX Control Toolkit, you are no doubt familiar with the ASP.NET AJAX Extender Control architecture. If not, at a high level, an ASP.NET AJAX Extender Control enhances an existing ASP.NET control by adding AJAX features. The control being extended is specified through the use of the TargetControlID property. You can target any standard web control like a TextBox, Button or Label.
Script Control's are a little different. Instead of adding AJAX to an existing ASP.NET control though the extensions, a Script Control is a new ASP.NET web control with AJAX features already incorporated into it. For the MarqueeControl I went down the path of creating a Script Control because I didn't feel that it would make sense to extend any of the existing controls with this feature.
That is probably the most difficult part about creating a Script Control - and since the Toolkit takes care of most of the work, we can focus on adding the properties for the custom features our control implements. So next I added the following properties to my MarqueeControl class
|ServiceMethod||The name of the web service or page method to call to get the marquee items|
|ServicePath||The path of the web service to call, if this is blank a page method will be invoked|
|IsRightToLeft||True if the marquee should scroll from right-to-left|
|ItemMouseOverCssClass||The CssClass to apply to the item when the mouse is hovering over it|
|ItemCssClass||The CssClass to apply to each marquee item|
|PixelsPerSecond||The number of pixels to move the item per second|
Here is the property setter/getter for the ItemMouseOverCssClass property. The other properties are implemented in a similar manner.
<div> <div id='wrapper'> <div id='ticker'> <span class='item'>ticker item #1</span> <span class='item'>ticker item #2</span> <span class='item'>ticker item #3</span> </div> </div> </div>
The wrapper DIV's position is set to relative and the overflow is hidden. Then after the service method returns the marquee items, I calculate the total combined width of all of the marquee items and set the ticker's width to this value. Then I register a callback using window.setInterval and as the callback is invoked I change the value of the left style attribute of the ticker element. Once I have determined that the ticker has completely moved across the area, I invoke the web service again and get the next set of items.
Implementing the Service Methods
To make my sample a little more interesting, I used the .Net 3.5's new System.ServiceModel.Syndication namespace to dynamically fetch some of ESPN.com and CNN.com's most popular RSS feeds. Once I have loaded the feed into the SyndicationFeed object, I create some HTML for displaying the feeds published date, title and a link to each of its posts. The MarqueeControl that displays the ESPN.com feeds uses the following page method to fetch its items. GetSyndicationItems is a helper method that I use to load the feed and generate the HTML I want the marquee to display.
Here is the helper function that generates the markup for each of our marquee items. The call to SyndicationFeed.Load is the magic line of code that loads the contents of the reader into the Syndication object model.
The Markup for the Marquee Control
Once the control was created, I added it to my page using the following markup.
This control is less than a day old, so there are no doubt bugs hiding around. If you see one, feel free to post a comment and let me know.
That's it. Enjoy!