A BBC Style news ticker (pre-2010)
by David Halls
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.
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.
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.
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.
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.
Added: 10th September 2009