A former BBC Style news ticker



 :

Latest BBC-style newsticker for a website

Latest BBC-style newsticker for a website

by David Halls

LATEST: pause  next


Introduction

A redesigned BBC News website went live in July 2010. There were many changes in layout and style, which caused some controversy. The old style was popular and an example of good design. One obvious change was that the news 'ticker' no longer ticks. Whar replaces it is a series of rotating links. This may be better as the whole of the text can be seen at one glance. Before you had to wait for the full text to be displayed.

A previous article showed how to produce the old style of BBC news ticker using Javascript. Not all news websites use a ticker. Of those that do, Sky News and The Scotsman have a news ticker similar to the old BBC news ticker. The Guardian has a link display similar to the current BBC style. Channel 4 news has a series of scrolling links.

This article shows how to produce an example of the current BBC-style 'ticker' as illustrated at the top of this page.

Laying out the display

The display is in three parts on the same line:

  1. The word "Latest:". On the BBC website this refreshes with each change of link. For most purposes, this is not necessary and in this development, we will keep the word stationary.
  2. The rotating news items which are links. This become underlined as you hover your mouse over the link.
  3. The control icons at the right of the line. The left one toggles between pause and go.

The code is:

 
<div id = "tickerspace" >
  <span><strong>LATEST: </strong>
  </span> 
  <span id = "textlink">
  </span>
  <span>
  <img id = "stopgo" onclick ="toggle();return false;"  width="15" height="15" border="0" alt="pause"> 
  <img src="images/back.gif" onclick = "prevlink(locator);return false;" width="15" height="15" border="0">
  <img src="images/forward.gif" width="15" height="15" border="0"  onclick = "nextlink(locator);"alt="next">
  </span>
</div> 

A div with an id of tickerspace is divided into three spans. The first contains the text "LATEST:". The second with an id of textlink is currently empty but will be filled with the links through the Javascript code. The last contains the images for the icons, each of which triggers an event when clicked. The source of the first icon is yet undefined but will be defined by the code.

To obtain the four icons for the controls, I cheated. I took a screenshot of the BBC New website (with ALT + Printscreen) and pasted this into Paint Shop Pro. This was then cropped to give the icons at 15 x 15px. A further screenshot when the ticker was paused gave the "go" icon. These images were stored in a folder "images"

Styling the display

The CSS is shown below.

<style type = "text/css">

#tickerspace
{
font-family: verdana,arial,helvetica,sans-serif;
font-size: 10pt;
}

#textlink {
display:inline-block;
width:500px;
height:15px;}

#textlink img {
vertical-align:middle;
}

#textlink a{ text-decoration:none;color:black;}
#textlink a:hover{text-decoration:underline;color:black;}
</style>

The central span, textlink, needs to be defined as display:inline-block in order to keep it inline and to define it as a block so it can be given a fixed width. The central links have no text-decoration normally but become underlined when the mouse hovers over them.

The arrays of links

We construct two arrays in Javascript. The first contains the text for the links and the second the relative URLs of the links. Note that the items in the array are between inverted commas and that they are separated by commas. There should be no comma after the last entry.

 
Within the <head> section of the page:

<script language="Javascript" type="text/javascript">
<!--
      textlist=new Array
      ( 	 
	"Redesigned BBC News website goes live in July 2010", 
	"The news 'ticker' no longer ticks",
	"Sky News keeps a proper ticker",
	"The Scotsman also has a proper news ticker",
	"Amateur programmer frustrated as his original article is now obsolescent",
	"He writes new article emulating current 'ticker'"
      );
	  linkslist=new Array
      ( 
	"http://www.bbc.co.uk/news/",
	"http://www.bbc.co.uk/news/",
	"http://news.sky.com/skynews/",
	"http://www.scotsman.com",
	"article25.html",
	"article31.html"
	  );
//-->
</script>

The Javascript functions to display the links

Firstly, we need a function to display a link for a given array number. This is added to the Javascript in the <head> section and is shown below.

function showlink(arrayno) {
var linkcontent =document.getElementById("textlink");
linkcontent.innerHTML = "<a href = '" + linkslist[arrayno] + "'>" + textlist[arrayno] + "</a>";
}

This defines the content of the span with an id of textlink with the HTML of the link for that particular arrayno.

Then we need a function to rotate the links with the Javascript timer setTimeout after a set interval. This timer requires two parameters, a function to call and the time interval in milliseconds before the function is called. In this case, setTimeout calls its own function after 4 secs, so that it effectively goes round in a loop calling the next highest number link in the array. The first line in the function checks whether rhe array number is at the limit for the array. If it is, it resets the variable i to zero.

var timer;
var locator = 0;
var i = 0;
function rotateLinks(i)
{
if (i >=textlist.length) i = 0;
showlink(i);
timer= setTimeout ("rotateLinks("+(i+1)+")",4000);
locator = i ;
}

Programming the controls

We need some Javascript in the main body of the page to set the ticker going and to set the image for the stop/pause control. This is shown below and should appear after the div "tickerspace". It sets the image for the stop/go control to the pause icon and sets the alt parameter to "pause". A variable stopgoimg defines the image from the DOM.

<script language="Javascript" type="text/javascript">
<!--
  var i = 0
  rotateLinks(i);
  var stopgoimg =document.getElementById("stopgo");
  stopgoimg.src = "images/pause.gif";
  stopgoimg.alt = "pause";
//-->
</script>

To use this icon, a function toggle() will change the icon and stop or set the ticker going. This function is placed in the block of Javascript in the <head> section. It tests the value of the image alt property, If it is "pause", the timer is stopped using the clearTimeout method and the image is changed to the "go" icon and its alt property set to "go". If, however, the icon is "go", the rotateLinks function is called and the image and its associated alt property are set to "pause".

function toggle()
{
  if (stopgoimg.alt == "pause")
    {clearTimeout(timer);
    stopgoimg.src = "images/go.gif";
    stopgoimg.alt = "go";}
  else 
    {stopgoimg.src = "images/pause.gif";
    stopgoimg.alt = "pause";
    rotateLinks(locator);}
}

The functions called by the other two icons, forward and back, are shown below. The parameter passed to the functions is locator which is the current position of the ticker in the array. These functions first stop the timer if it is running and then change the icon and its "alt" property. The previous or next link is then shown and the variable locator changed accordingly. For the previous link, a test is first made whether locator is at the beginning of its range. If it is, locator is set to the highest number of the array. Conversely, for the next link, if it is at the end of its range, it is reset to the beginning.


function prevlink(k)
{
clearTimeout(timer);
stopgoimg.src = "images/go.gif";
stopgoimg.alt = "go";
if (k<=0) {k = textlist.length -1;}
else {k = k -1;}
showlink(k);
locator = k;
}

function nextlink(j)
{
clearTimeout(timer);
stopgoimg.src = "images/go.gif";
stopgoimg.alt = "go";
if (j>=textlist.length-1)
{j=0;}
else
{j =j + 1;}
showlink(j);
locator = j;
}

Conclusion

The code shown here gives a "ticker" as shown at the top of this article. It differs from the real BBC "ticker" in two ways. Firstly, the word LATEST: does not refresh. Secondly, the slight fade between links evident in the real BBC ticker is not reproduced here. Whether it is important, it is up to you to judge.

The full code can be copied by going to this page. Use your browser to view the code (In Internet Explorer, right vlivck on the page and select "View source"). You will need to set up the images. You can pinch mine by right-clicking on the icons and selecting "Save picture as".

References

Article Date: 14th August 2010. Amended 10th March 2012 to correct two bugs. Thanks to Umar Rehman for pointing these out.

Leave a Reply

Your email address will not be published. Required fields are marked *