This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Monday, October 6, 2008

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


 

News ticker with horizontal scrolling using MootoolsFantastic News Ticker Newsvine-like using Mootools

blog comments powered by Disqus
Jack said...

Great post as usual. This is a great blog!

Nicolás said...

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!

Boo said...

Totally awesome!

Darshan Chande said...

Thanks again. it will be quite useful... :)

Anonymous said...

hi all!
An jquery version is available?

thanks

donk.usa said...

Do you have a post on creating news feeds on a site?

peteej said...

Antonio, your timing is impeccable! Thank you for sharing your excellent work. :)

Anonymous said...

Everytime i try to resist kissing your ass...i fail simply cos you're pure genius...keep it up man!

SEO Company said...

Nice Post. Thanks for sharing.

Richard said...

I have used this and it works big time!

Sanjeev said...

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?

cyrille said...

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

Ghus said...

Thanks a lot, it wild very useful.
Keep the good work
=D

Anonymous said...

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?

Yatrik said...

Really very useful.

Just wondering, how can I add PREV | NEXT to it?

Thanks.

Anonymous said...

This is amazing. Thank you so much for sharing this code.

Eric said...

Wouldn't it make more sense to just pause on a mouseover? Or I guess you could do both...

Raj said...

Thank You very much for the Vertical New Ticker. Found many on the internet and this one is da best!

Again Thx a Bunch.

Prashanth said...

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

Scott said...

Sure it's a great scroll, but what about getting it to work in the latest IE? ANYONE?

Patrick said...

Nice work. Thanks.

John Moore said...

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

carlosduarte85 said...

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

Anonymous said...

Excellent ! Excellent !
Exactly what i was looking for. Thanks so much.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News