Some time ago I wrote an interesting post about how to implement a news ticker with automatic vertical scrolling (Newsvine.com-like) using MooTools.
In the past days a lot of people asked to me to modify the code of the news ticker, adding new features: in particular, Start/Resume options. So, today I released a "ready to use" script which you can use quickly on your web projects (take a look at the previous post for more information). I want to say thanks to my friend Shane Holland for his useful suggests about the solution I adopted in this post.
Download full code
Live Preview
1. Start/Stop controller
I change the code of my previous tutorial about the news ticker adding a new layer with ID=controller which includes a play/stop button to start/stop vertical news scrolling:

When you click on the button, this action enables/disables vertical news scrolling and changes the button look with its related message from "stop" to "play":

2. HTML and CSS code
I added this code into the div with ID=NewsTicker:
<div id="stop_scroll_cont">
<div id="play_scroll_cont">
...and I added this line within CSS code:
3. Javascript function
I created a new file newsticker.js which inlcudes JavaScript the code to enables vertical scrolling and stop/play features. You may add this code below the #newsTicker layer:
In newsticker.js I added the following code to enable stop/play features:
var hor = new Ticker('TickerVertical', {
speed : 500, delay : 5000, direction : 'vertical'});
$('stop_scroll').addEvent('click', function() {
$('play_scroll_cont').style.display='block';
$('stop_scroll_cont').style.display='none';
hor.pause();
});
$('play_scroll').addEvent('click', function() {
$('stop_scroll_cont').style.display='block';
$('play_scroll_cont').style.display='none';
hor.resume();
});
});
It's all! Download the full code and try it!
Download full code

Great post as usual. This is a great blog!
Wow.. This theme is awesome, but Id like more the older one.
If you can release it will be great.
Anyway, thanks for this theme and Ill use it in a future project.
Bye!
Totally awesome!
Thanks again. it will be quite useful... :)
hi all!
An jquery version is available?
thanks
Do you have a post on creating news feeds on a site?
Antonio, your timing is impeccable! Thank you for sharing your excellent work. :)
Everytime i try to resist kissing your ass...i fail simply cos you're pure genius...keep it up man!
Nice Post. Thanks for sharing.
I have used this and it works big time!
This has to be the best Blogger template ever. Just found the site.
I presume one could have a BlogRoll as input into this scrolling widget?
Very fine and practise, this tutorial!!
But I tried to use mootools 1.2 and code I get in this link nabble
It runs under firefox but not under IE7
What's the trouble?
Thanks
Thanks a lot, it wild very useful.
Keep the good work
=D
Love these tutorials, but where is the demo so we can see it in action?
Please can you post a link to a working demo?
Really very useful.
Just wondering, how can I add PREV | NEXT to it?
Thanks.
This is amazing. Thank you so much for sharing this code.
Wouldn't it make more sense to just pause on a mouseover? Or I guess you could do both...
Thank You very much for the Vertical New Ticker. Found many on the internet and this one is da best!
Again Thx a Bunch.
Amazingly Great Post. I need a bit of help. When I use more than one scrollers in the same page, only the first one scrolls, the others don't, secondly I need the scrollers in stop mode on load and start only when play is pressed. Can you please help me. thanks
Sure it's a great scroll, but what about getting it to work in the latest IE? ANYONE?
Nice work. Thanks.
I tried to replace the mootools.svn.js with a full mootools1.2.1-core.js and got an error at:
w = this.el.getSize().size.x;
in the newsticker.js
I'm not familiar enough with mootools yet to track this down. Any ideas..?
(great tool BTW...)
John Moore
SonicSpider LLC
Hi, i've another ul li list in my page, when i use your news ticker, the wrong list is beeing used by newsticker.js how can i set this to only use the list id="TickerVertical" thank you great work
Excellent ! Excellent !
Exactly what i was looking for. Thanks so much.