A Javascript News TickerTape Component

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

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 here, 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.

Responses to “A Javascript News TickerTape Component”

  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

Post a Reply