Matt Berseth

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.

Live Demo (IE6, IE7 and FF) | Download

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.

The AJAX Control Toolkit's ScriptControlBase is the base class for my MarqueeControl.  The ScriptControlBase class inherits from ASP.NET AJAX's ScriptControl class and also implements the IScriptControl interface, which contains 2 methods: GetScriptDescriptors and GetScriptReferences.  GetScriptDescriptiors returns the ScriptDescriptor objects that are used by ASP.NET AJAX to emit the $create statement that initializes your JavaScript components by setting the client side properties to the correct values.  GetScriptReferences is used so all of the required scripts are sent along with the page.  The nice part about using the AJAX Control Toolkit's ScriptControlBase class is that you can add attributes to you class and properties and the Toolkit's ScriptControlBase class will take care of implementing these methods for you.  Here is the MSDN documentation for these two methods.

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

Here is the property setter/getter for the ItemMouseOverCssClass property.  The other properties are implemented in a similar manner.

The Marquee JavaScript Behavior

Just like with creating Extender Controls, Script Controls also have a corresponding JavaScript behavior.  So for the MarqueeControl, I created a JavaScript behavior with the same properties defined in the table above.  As soon as the client side behavior is created I call the service method to get the marquee items.  As they are returned I add them to SPAN elements that I append to the ticker DIV.  The element structure for my control is as follows ...

<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!