Automatic news ticker with vertical scrolling and Start/Resume options

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="controller">
<div id="stop_scroll_cont">

<a id="stop_scroll"><img src="pic/stop.png" width="14" height="14" border="0" align="absmiddle" /></a> Stop news scroll

</div>

<div id="play_scroll_cont">

<a id="stop_scroll"><img src="pic/play.png" width="14" height="14" border="0" align="absmiddle" /></a> Play news scroll

</div>scroll</div>

...and I added this line within CSS code:

#play_scroll_cont{display:none;}

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:

<script language="javascript" type="text/javascript" src="newsticker.js"></script>

In newsticker.js I added the following code to enable stop/play features:

window.addEvent('domready', function() {
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