BBC style ticker-tape news ticker

Note: this post from 2007 is provided as an archive, since it is still heavily Googled and viewed. However, I no longer support the ticker plugin.

Wanting [in 2007] to create a news ticker along the lines of that then used on the BBC news site, I took a look around for a handy plugin to do it, but with no success. So... I created my own, as a jQuery plugin.

Post by
17 October 2007

Bryan Gullan

You can download it, or read on for the demo and documentation.

In action

Using it

Put this code in your <head> section, or just before your closing body tag, if you prefer.

<script src="jquery.js"></script>
<script src="jquery.newsTicker-2.3.6.js"><script>
<script>
$(document).ready(function() {
  var options = {
    newsList: "#news",
    startDelay: 10,
    placeHolder1: " []"
  }
  $().newsTicker(options);
});
</script>

Use the following code for your list of items for the ticker

<ul id="news">
  <li><a href="http://www.makemineatriple.com">MakeMineATriple.com</a></li>
  <li><a href="http://www.jquery.com">jQuery</a></li>
</ul>

Underline text decoration on the link is not recommended!

The options (defaults shown) are:

  • newsList: "#news" // assumes unordered list; specify the ul holding the news items
  • tickerRate: 80 // time gap between display of each letter (ms)
  • startDelay: 100 // delay before first run of the ticker (ms)
  • loopDelay: 3000 // time for which full text of each item is shown at end of print-out (ms)
  • placeHolder1: " |" // character placeholder shown on even loops
  • placeHolder2: "_" // character placeholder shown on odd loops
  • controls: true, // show resume / stop controls (see below for the markup added)
  • ownControls: false // use own markup for controls (sets controls = true)
  • stopOnHover: true // trigger the stop action on hovering over the links
  • resumeOffHover: false // trigger the resume action on mouseout from the links. NB the links must be block display for this to work reliably with stopOnHover

If you enable the controls, the following will be added just after your list of items:

<ul class="ticker-controls">
  <li class="play"><a href="#play">Play</a></li>
  <li class="resume"><a href="#resume">Resume</a></li>
  <li class="stop"><a href="#stop">Stop</a></li>
  <li class="previous"><a href="#previous">Previous</a></li>
  <li class="next"><a href="#next">Next</a></li>
</ul>

Alternatively, if you wish to use controls but use your own markup for them, set the 'ownControls' parameter to true (which sets 'controls' as true) and apply the appropriate classes to your control elements as per the above controls)

Only a subset of these controls will be visible at any one time, depending on the play state of the ticker.

Download it

Version 2.3.6 (16 March 2011)

© Bryan Gullan