Hire me at Go Tripod.

A Javascript News TickerTape Component

April 20th 2007, 8:58 am in Javascript, Projects, TickerTape.

UPDATE: A new version of the component is available which supports horizontal scrolling.

This component vertically scrolls a number of items within a container. Each page of items is pulled from a server which supplies JSON data. You can find a demo of the TickerTape in the download archive, and the download for the latest version here. There is a readme.txt in the download, or read on for an example usage.

new TickerTape('tickertape.php', 'myTickerTape', 5000);

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.

If you have any recommendations or bugs, please just post them in the comments or email me.

Update: The TickerTape is now available on Google Code.

Responses to “A Javascript News TickerTape Component”

Comments are closed.

  1. [...] Javascript TickerTape Component, using JSON of course. Spread the [...]

    Bram.us » Javascript TickerTape Component
  2. [...] of items within a container. Each page of items is pulled from a server which supplies JSON data. [go] Related resources Creating a MySQL connection with PHP/AJAXAutoSuggest MenuAjax dynamic page [...]

    A Javascript TickerTape Component » Webdesign Archive
  3. Nice! – would of course liked if there was an option to pause on hover, lock the display (freeze) and scroll back :)

    much better than most, I must say!

    Gsweet
  4. One note… leave the page open for about 2-3 hours… and you’ll notice it starts to grind… (slows down)…

    I’d inspect for a memory leak or similar…

    Steve
  5. [...] Para mais informações visite: http://colinramsay.co.uk/2007/04/20/a-javascript-tickertape-component/ [...]

    Javascript para criar scroll vertical
  6. [...] The parameters are: the data url, a CSS(link) (Cascading Style Sheets) 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. Source:→ HomePage [...]

    TickerTape: Scrolling Javascript Tickers » D’ Technology Weblog: Technology News & Reviews
  7. [...] Ramsay has rolled his own TickerTape cmoponent that will scroll through items retrieved from your [...]

    TickerTape: Scrolling tickers in JavaScript
  8. Steve – the memory leak problem is interesting so I’ll try and address that in the next release.

    Gsweet – I think pause on hover will be a feature of the next release as you’re not the first to ask for it.

    colinramsay
  9. [...] Ramsay creo un componente llamado TickerTape , que ira haciendo un scroll atraves de la información obtenida del back [...]

    TickerTape at
  10. of items within a container. Each page of items is pulled from a server which supplies JSON data. [go] Related resources Creating a MySQL connection with PHP/AJAXAutoSuggest MenuAjax dynamic page

    工��
  11. [...] http://colinramsay.co.uk/2007/04/20/a-javascript-tickertape-component/ (tags: javascript ticker) [...]

    links for 2007-04-26 « toonz
  12. [...] javascript ve css tabanlı yazılmıÅ? güzel bir kayan yazı örneÄ?i. Link [...]

    Fatih HayrioÄ?lu’nun not defteri » 28 Nisan 2007 Web’den seçme haberler
  13. [...] http://colinramsay.co.uk/2007/04/20/a-javascript-tickertape-component/ [...]

    Links for 2007-04-26 [del.icio.us] | Blog Tecnologia
  14. The online demo works fine but the demos on the pack (v1.01) aren’t working.
    Are they the same version?

    Skyline
  15. [...] Ñ?ваÑ?кÑ?ипÑ? marquee Ð?еÑ?Ñ?икалÑ?нÑ?й Ñ?кÑ?ол-бокÑ? на Ñ?ваÑ?кÑ?ипÑ?е. Ð?Ñ?оÑ?Ñ?о, но иногда понадобиÑ?Ñ?Ñ?. РабоÑ?аеÑ? [...]

    Ð?Ñ?оÑ?Ñ?ой Ñ?ваÑ?кÑ?ипÑ? marquee « Ð? PHP и о жизни…
  16. I can’t seem to get it working in horizontal mode… it draws the box vertically, then starts repeating the same headlines, expanding the box horizonally with each timer tick. Almost like it does not recognize that it’s in horizontal mode.

    Scott Sharkey
  17. Hmm. It could be an issue with the styling? Best bet is to just take the examples and tweak them until you get what you’re after.

    Do the examples actually work for you?

    colinramsay
  18. [...] TickerTape – a ‘news’ vertical scroller for your website He had a few simple errors, but it is very small and could definitely come in handy. [...]

    All in a days work…
  19. problem scroling in IE7.Script scroll 1px each time down

    sasha
  20. [...] Ð?пиÑ?ание СкаÑ?аÑ?Ñ?[8.5 кб] Ð?оÑ?ожие запиÑ?и: -  AJAX как Ñ?поÑ?об [...]

    Ð?овоÑ?Ñ?ной Ñ?икеÑ? AJAX » СкÑ?ипÑ?Ñ? » AllAJAX.ru
  21. Bu javascripti göremedim ben nerden download ediliyor kayan yazı scripti lazım bana ? Thanks

    Evkur
  22. I canâ??t seem to get it working in horizontal mode … thanks

    Chat
  23. Hardcore Ass Fucking…

    Test Cricket, Football Italia, Channel 4 Racing, Horse Racing, World Cup Skiing, Betting

    Alexandrina
  24. tanx
    i love you :)

    allahyar
  25. If I use this script combinated with PHP (database) then the script shows one message, but there is more information in my database. Can anybody help me?

    Marper
  26. Hi

    I’ve tried using the TickerTape component and it works very well. Thanks alot.

    The only slight problem that we’ve had is that when the browser(IE 6) is resized the tape disappears.

    This doesn’t happen on the demo page that you’ve supplied so it must be something to do with the html on our page. Has anyone else seen this problem ?

    tc
  27. anlamadım a.q

    var bea
  28. salakoglu salak ne yazarsin turkce mal okuz :)

    bende
  29. I have error in ie6
    Cod:0

    who have error in ie6?
  30. Excellent script, just what I’ve been looking for !

    One question though : I’d like the ticker to run in my (menu)sidebar, which is loaded on each page with an external .php file. When I place the required Javascript code where I’d like the ticker to appear, it keeps executing and writes the demo-texts endlessly instead of scrolling.
    How can I keep this from happening ?

    Peter
  31. Re: my question above

    Found an answer : a php include of the styled-demo.html ( my personal favourite ) did the trick nicely. Then it’s just a matter of adjusting the relevant CSS to fit my site.

    Peter
  32. [...] For more updates please visit SCRIPT NAME author page Share and Enjoy: [...]

    AJAX Lady - AJAX Lady - Download Ajax Scripts, Ajax Examples, Ajax Demos
  33. I don’t know if it is a memory leak causing the problem, the javascript starts taking 100% cpu usage after a while.

    moolie
  34. I also experience a problem with IE 6, where the code for XMLHttpRequest is not working. I recommend replacing:

    var xhr = new XMLHttpRequest();
    combined with the solution from http://snook.ca/archives/javascript/short_xmlhttprequest_abstraction/
    (search for these in the code)

    by the standard:
    var xhr = null;
    if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
    xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
    }

    moolie
  35. My comment about the 100% cpu usage (on one cpu core of course) is with firefox 3 on Windows XP by the way.

    moolie
  36. [...] �示 Demo [...]

    TickerTape News Component - å??容æ»?å?¨å¹¿å??,æ?°é?»ç»?ä»¶ - Code Index
  37. saol can?

    ekol
  38. Hello. Great job. I did not expect this. This is a great info. Thanks!

    aSKer