Ticker with jQuery

Do you want a BBC-style ticker like the one on http://wadr.org/ driven by Newscoop? Of course you do!

Everything important is in this code:

<div id="ticker-wrapper" class="no-js">
 <ul id="js-news" class="js-hidden">
  {{ list_articles length="5" order="bypublishdate desc" constraints="section is 5" }}
   <li class="news-item">
    <a href="{{ uri options="article" }}" >{{ $gimme->article->name }}</a>
   </li>
  {{ /list_articles }}
 </ul>
</div>

This code selects the last five published articles from section number 5 and creates an unordered list of article names, also linking them to the full article page.

Add some jQuery magic:

$(document).ready(function(){
  $('#js-news').ticker({
    titleText: 'WADR Highlights'
  });
});

The engine behind this is the jQuery News Ticker (http://www.jquerynewsticker.com/), so be sure to have all necessary includes in their place, in _html-head.tpl

<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="http://{{ $gimme->publication->site }}/templates/js/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="http://{{ $gimme->publication->site }}/templates/js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="http://{{ $gimme->publication->site }}/templates/js/jquery.ticker.js"></script>

and also the css file that belongs to it:

 <link type="text/css" rel="stylesheet" href="http://{{ $gimme->publication->site }}/templates/css/highlights.css" />

This is of course just one of hundreds of different solutions that you can find on the Internet, so feel free (and encouraged) to explore and play with other toys!