Newscoop 4 Cookbook

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!