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