Ticker Tape

This component vertically scrolls a number of items within a container. Each page of items is pulled from a server which supplies JSON data. The parameters are: the data url, a css class for the container, and the time to pause between scrolling each item. Very simple! I had to do this for a project recently and couldn't find any useful "modern" implementations, so I rolled my own. The core js file is 8.5k without any compression at all, or dependencies.

Ticker Tape demo

Changes to the code below will update the demo above in real time.



June 13, 2008, 8:25 p.m. - FT

var urlWithParams = this.dataUrl + concatCharacter + "lastId=" + this.lastId; //random number in url = no cache urlWithParams=urlWithParams+"&rand="+Math.random();

April 9, 2009, 4:46 a.m. - Saumya

The url format doesnot support in the html. eg. www.webduniz.com/json/number.js

May 11, 2009, 7:32 a.m. - Pablo

Wont work with latin characters as it is

June 1, 2009, 7:21 a.m. - Samir

Hi, This code is amazing!!! But I can't use them in Internet Explorer 7. Can you help me where and what I'll need change the code to run? Thanks all!

March 20, 2010, 9:19 a.m. - hrf

I use opera which you give a message about it not supported. It's bad practise to use browser detection, you should be using feature detection because opera will probably work.

March 29, 2010, 3:55 a.m. - Rahul Sharma

Ticker Tape not working in i6

Aug. 27, 2010, 6:29 a.m. - David

Hola! esto mola!

Aug. 11, 2012, 12:26 p.m. - Anuj Khandelwal

How to make "Facebook like" ticker which scrolls only when a new entry is added.