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.

image

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.

image

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.

image 

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. 

image

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.

image

The Markup for the Marquee Control

Once the control was created, I added it to my page using the following markup.

image 

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!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/98

Listed below are links to weblogs that reference CNN Style Scrolling Ticker with the Marquee Toolkit Control:

» Jan 24th Links: ASP.NET, ASP.NET AJAX, Visual Studio, .NET, IIS from ScottGu's Blog
I just arrived back from my trip from Asia, and decided to celebrate (since I'm jet-lagged and can't [Read More]

» Jan 24th Links: ASP.NET, ASP.NET AJAX, Visual Studio, .NET, IIS from Community Blogs
I just arrived back from my trip from Asia, and decided to celebrate (since I'm jet-lagged and can't [Read More]

» Jan 24th Links: ASP.NET, ASP.NET AJAX, Visual Studio, .NET, IIS from Mirrored Blogs
I just arrived back from my trip from Asia, and decided to celebrate (since I'm jet-lagged and can't [Read More]

Comments


Posted by: IndyFromOz on January 6, 2008 12:00 AM

Matt,

Two words sum up everything - "YOU ROCK"!! When can we see a cookbook style book from you on ASP.NET AJAX? Seriously, your blog posts carry more insight than some of the books now available!

Expect more goodies from you!
Cheers,
IndyFromOz

Posted by: Vish on January 7, 2008 12:00 AM

Hi Matt,

Thanks, it will be very useful as I was creating my own rss reader

Posted by: rob mathieson on January 7, 2008 12:00 AM

Hi Matt

Been reading your blog for a while and love the stuff you do, but i have to comment on your cardinal sin. Tickers have no place on any website! It is a well known fact that they drag the eye away from content and impede usability, so we should try not to encourage them. Other than that, I love the stuff you do! Keep it going.

Rob

Posted by: Morteza on January 7, 2008 12:00 AM

excellent, thanks

@rob mathieson

Hi Rob. I was thinking of using in on dashboard/homepage type pages - does that make it any less of a cardinal sin?

Thanks for the comment, you have me interested. I am going to do a little research on tickers to see what/if they have a recommended place in a web UI.

Matt.

@IndyFromOz -

A book? Sounds like a lot of work ;).

Thanks for the comment.

Matt.

Posted by: Michael Starke on January 7, 2008 12:00 AM

I remember when I did something like this a while back as my first real attempt at extending the toolkit. I did it for photo thumbnails, and had resolved to extend it for text content too "some time in the future." Yout put me to shame sir. Now I have to go find my old implementation and work that out. Congrats on another splendid article.

*rummages through source control*

Posted by: Geoff on January 7, 2008 12:00 AM

Nice One

Hey Now Matt,
Your blog is great and this is another well written post.
Thx 4 all the info,
Catto

Posted by: Michael on January 10, 2008 12:00 AM

Thanks for all that you share. I am new to this programming thing. Seeing detailed examples like this make the learning fun and easier.

Posted by: whatispunk on January 18, 2008 12:00 AM

Youve got some seriously neat AJAX stuff on this site.

You really ought to write a book. Sure its a lot of work, but it could also make you a lot of money.

Posted by: Aaron Westley on January 25, 2008 12:00 AM

I saw "Scrolling" and "Marquee" and I rolled my eyes. But I have to say this is very well done. Nice work. Thanks.

Works well in Opera 9.x, too!

I tried to get this to work by putting a servicepath attribute on the marqueecontrol call and creating a webservice and I can not get it to work. Does someone know of a good website that may be able to help me with this? And how would you debug this or set up debugging to see what is happening?

Posted by: Bernard Jourdain on February 19, 2008 12:00 AM

Hi Matt,
Thanks. Its a good work to learn how to create Ms control. How to modifiy it to have a vertical scroller?
Thx

Posted by: Dan B. on April 15, 2008 12:00 AM

Very good and informative article. However, there is a problem with this marquee control that the original liScroll doesnt have, and that is that liScroll degrades nicely back to a standard HTML list when JavaScript is disabled. Unfortunately Matts control doesnt, meaning it cant be used to generate accessible markup, which is a shame.

Posted by: Ivica on April 23, 2008 12:00 AM

Your Marquee perfectly work but not on master page?! Can you help me...How implement this control on master page?

Posted by: Ivica76 on April 23, 2008 12:00 AM

Hi Matt,

This control is very good but cant work in master page file. Can you show me how can I do that...

Hello from Croatia!

Posted by: Akshay on June 1, 2008 12:00 AM

Hi Ivica,

You can use an iframe and display the ticker on a master page. I have tried this and it works fine.

Regards,
Akshay

Html Attribute for -- Marquee Slide Image and Text ---http://html-lesson.blogspot.com/2008/06/marquee-slide-image-text.html

Posted by: Ruchit on July 28, 2008 08:21 AM

Hye it would be fine if you have any demo is visual studio 2005...i hope u will help in this matter....

This is great! but what about using the same thing for data from an Entity data source for instance? Can anyone advise?

Posted by: Stelios on October 20, 2008 04:49 PM

Concerning the master page issue, check if the method declaration in the web service is static as is on Matt's sample.
I removed the static declaration and the scroller works ok in a master page.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Stelios wrote: Concerning the master page issue, check if the method declaration in the web service is static as is...
  • Burhaan wrote: This is great! but what about using the same thing for data from an Entity data source for instance?...
  • Ruchit wrote: Hye it would be fine if you have any demo is visual studio 2005...i hope u will help in this matter....
  • kayan marquee wrote: Html Attribute for -- Marquee Slide Image and Text ---http://html-lesson.blogspot.com/2008/06/marqu...
  • Akshay wrote: Hi Ivica, You can use an iframe and display the ticker on a master page. I have tried this and...
  • Ivica wrote: Your Marquee perfectly work but not on master page?! Can you help me...How implement this control on...
  • Ivica76 wrote: Hi Matt, This control is very good but cant work in master page file. Can you show me how can I do ...
  • Dan B. wrote: Very good and informative article. However, there is a problem with this marquee control that the or...