A BBC Style news ticker (pre-2010)

by David Halls



 :

This article was written in October 2008 and relates to the news ticker used at that time. There have been two changes since then. In the first, the BBC News ticker became far more elaborate. If you hovered your mouse over the ticker, the ticker action appeared to stop and the full message and link was displayed. The website also had a special style for "Breaking News" in the ticker.

In July 2010, the BBC News website underwent a major redesign. 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. What replaces it is a series of rotating links. If you want to be able to reproduce the modern "ticker", see my new article on this. Some news websites are still using a variation of the ticker used in the present article, e.g. Sky News and The Scotsman

This article describes how to produce a ticker that works in the same way as the ticker on the former BBC news website.

If you do a search for news ticker on the internet, most of the examples that you will find will be of the scrolling ("marquee") type. However, you can find the source code of the BBC News Ticker on http://news.bbc.co.uk/nol/ukfs_news/hi/front_page/ticker.stm. The code no longer works, but, if you are in Internet Explorer, you can view the code by right-clicking on the page and selecting "View Source". Although the code is well-written, it seemed unnecessarily complicated to me and I found it thus difficult to follow.

I did find some code in an unexpected place. I use First Page 2000 as an HTML editor and among the "Instanz Scripts", I found one called "Type Writer" that was relatively simple and allowed messages to be displayed. It would be nice to attribute this code to an individual but all First Page 2000 indicates that it came from netpedia.com. The original site seems to have disappeared and has been replaced by one of those horrible holding sites of useless links. Anyway I would like to express my gratitude to whoever developed this script. The code is decribed below.

The starting code

This code has a function, textlist, which defines an array and its parameters. The messages are arranged in an instance of this array.

 
<head>
 <script language="JavaScript">
      <!-- begin
      var max=0;
      function textlist()
      {
      max=textlist.arguments.length;
      for (i=0; i<max; i++)
      this[i]=textlist.arguments[i];
      }
      tl=new textlist
      ( 
       "This is a  message",    
       "Another one",
       "And this will be the third",
       "And the fourth is the last !"
      );
      var x=0; pos=0;
      var l=tl[0].length;
      function textticker()
      {
        document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
        if(pos++==l) { pos=0; setTimeout("textticker()",1000); x++;
        if(x==max) x=0; l=tl[x].length; } else
        setTimeout("textticker()",50);
      }
      // end -->
      </script>
</head>
<body onLoad="textticker()">
	  <form name="tickform"<>input type=text name="tickfield" size=40></form>
</body>	 

The code starts with the first message, displaying a substring starting at the first character to the character at pos = 0 followed by "_". After a time interval of 50 ms (setTimeout("textticker()",50)), textticker() runs again this time with pos =1, displaying another character and this repeats until pos is equal to the length of the message (l). When this is true, pos is reset to 0, there is a time interval of 1000ms and x increments to give the next message. The next message is displayed and so on until the last message has been displayed and x== max. The code resets itself then to start again with the first message.

Some amendments

The ticker runs in a form input box. I wanted the ticker to run directly on the page in a row beginning with the current date. Thus, instead of using a form, the ticker runs in a div with two spans. The first contains today's date generated by Javascript. The second is initially empty but its innerHTML is produced by the ticker code:-

I also found the speed perhaps too quick so I changed the time between ticks from 50 to 100 ms and the time between messages from 1000 to 2000 ms.

 
<div id = "scrolltext" >
<span><script language="Javascript" type="text/javascript">
<!--
var today = new Date();
document.write (today.toLocaleDateString()+ ": ");
//-->
</script<:</span> 

<span id ="tickdiv">
</span>
</div>

and the function textticker becomes

 function textticker()
      {
	    var tickcontent =document.getElementById("tickdiv");
        tickcontent.innerHTML=tl[x].substring(0,pos)+"_";
        if(pos++==l) { pos=0; setTimeout("textticker()",2000); x++;
        if(x==max) x=0; l=tl[x].length; } else
        setTimeout("textticker()",100);
      }

Adding Links

The example above is fine for displaying messages, but the BBC News website has clickable messages that lead to the full news story. How can we do this?

A first approach might be to put the links into the array, like this:-

 
tl=new textlist
      ( 
       "<a href = "http://www.firstmessage.co.uk">This is a  message</a>",    
       "<a href = "http://www.secondmessage.co.uk">Another one</a>"
      );

This is not successful as the code has to run though the link and the text remains invisible until this has finished. We could add the links into a second array and add the first part of the link as a constant to the line in text ticker before the substring. We then have to add the closing "</a>" before the "_". This solved the problem of the delay but the link only worked when the full message was displayed. On the BBC website, the link works at any point while the message is being formed.

How can we do this? Well there are clues in the code for the BBC News ticker. We create a second array of links which we can do by creating another instance of textlist. We then modify the <div> which will contain the ticker messages to include the code for a link. This link is given an id, ticktext in this example, and an href of "#" which would normally redirect it back to the top of the current page. However, we assign the actual href from the array of links by Javascript code using the Document Object Model. As can be seen in the code below, the element with the id of "ticktext" (i.e. the link) has its innerHTML set to the incrementing message and its href set to the corresponding link from the second array.

<script language="JavaScript">
      <!-- begin ticker code
      var max=0;
      function textlist()
      {
      max=textlist.arguments.length;
      for (i=0; i<max; i++)
      this[i]=textlist.arguments[i];
      }
	 
      tl=new textlist
      ( 	 
	<!--Put ticker text here, each line, except last, ending with a comma-->
	"Learn how to make your own ticker", 
	"Use SQLite as a database for your website",
	"See a video of Clydesdale horses in harness",
	"Admire some of the scenery in South Lanarkshire, Scotland",
	"Style your website tables with CSS",
	"Use the database SQLite with VBScript in HTML programs",
	"Produce vertical bar graphs in HTML with VBScript in HTML programs"
	<!--End of ticker text-->


      );
	  ll=new textlist
      ( 
	<!-- List links in same order. List between inverted commas. A comma after each 
	   except the last one. If no link, put in "#"-->
	"#",    
	"http://www.djhweb.co.uk/sqlite1.htm",
	"http://www.djhweb.co.uk/gallery4.php",
	"http://www.djhweb.co.uk/gallery2.php",
	"http://www.djhweb.co.uk/css3.html",
	"http://www.djhweb.co.uk/sqlite2.htm",
	"http://www.djhweb.co.uk/article17.html"
	<!-- end links-->
	  );
	   var x=0; pos=0;
      var l=tl[0].length;
	  function textticker()
      {
	  var tickcontent =document.getElementById("ticktext");
	  
	  tickcontent.innerHTML = tl[x].substring(0,pos)+"_";
	  tickcontent.href =  ll[x];
       if(pos++==l) { 
	   pos=0; 
	   setTimeout("textticker()",2000); x++;
        if(x==max) x=0; l=tl[x].length; } else
        {setTimeout("textticker()",100);}
      }
		
	  // end -->
	  </script<>   
	  
	  and in the body of the page put 
<div id = "scrolltext" >
      <span><script language="Javascript" type="text/javascript">
      <!--
      var today = new Date();
      document.write (today.toLocaleDateString()+ ": ");
       //-->
       </script<:</span> 
	   <span><a id = "ticktext" href = "#"></a>
	   </span>
</div>           

Conclusion

You can see the resultant ticker working at the top of this page and you can check the links. To avoid conflict between the two tickers displayed on this page, the second is, in fact, working on another page shown through an iframe.

Article Date: 19th October 2008. Amended 10th September 2009. Further revised 16th August 2010.

Footnote

Added: 10th September 2009

It has been pointed out to me that the ticker works differently in Firefox. Whereas in Internet Explorer, it is possible to get action by clicking on the newsticker link while it is running, in Firefox, it will only move when the ticker has fully played out its message and the link is then clicked. A check has shown that it works as intended in Google Chrome and Apple Safari for Windows. I have not been able yet to find out why Firefox interprets Javascript events differently.