This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Sunday, July 27, 2008

Fantastic News Ticker Newsvine-like using Mootools

Do you like Newsvine News Ticker? In this tutorial a simple way to implement it on your website!
Finally, after a lot of your requests I added this tutorial which explains how to implement a News Ticker, with news vertical scrolling, using mootools. It's very simple and quick to implement in your web projects. I took inspiration from Newsvine Live panel for the CSS style and the result is something like this:



I want to say thanks to Capitol Media (a Seattle website design and online marketing company) which provided the original JavaScript function I used with mootols for this News Ticker.

Download source code Live Preview


Step 1: Introduction to News Ticker
This is the structure I used for this News Ticker:



...each news is contained into a <li> element and <ul> list is contained into the layer #NewsVertical with overflow property set to hidden and position set to relative. Take a look at the Step 3 for CSS code.


Step 2: HTML Code
First of all add a link to mootools framework in the <head> tag of your page:

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


... and add this code into the tag <body>:

<div id="NewsTicker">
<h1>What's news?</h1>
<div id="NewsVertical">
<ul id="TickerVertical">
<!-- Each News into a LI element
Use PHP or another language
to get dinamically your news. -->
<li>
<img src="img/img1.png" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="link.html">News Title</a>
</span>
Some text here, it's your news summary...
<span class="NewsFooter"><strong>Published July 25</strong> - 324 comments</span>
</li>
<!-- If you can't use a server side
language to get your news add
manually your news into LI element
-->
</ul>
</div>
</div>


How you can see, in the code above I just added the main HTML elements. You can add your news manually adding <li> elements to the previous code or, if you use PHP (or another server side language such as ASP, Coldfusion, Js...) you can get your news dinamically from a database table. For example, image to have a table NEWS which contains data you want to add to your news ticker; the first thing to do is get these data using a query like this:

<?php
$getNews_sql = 'SELECT * FROM NEWS';
$getNews = mysql_query($getNews_sql);
?>

...then using a while statement to add news to the news ticker. PHP code can be something like this:

<?php while ($row = mysql_fetch_array($getNews)) {?>
<li>
<img src="<?php echo $row['img_link']; ?>" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="<?php echo $row['news_link']; ?>">
<?php
echo $row['news_title']; ?>
</a>
</span>
<?php echo $row['news_summary']; ?>
<span class="NewsFooter">
<strong>
Published <?php echo $row['news_date']; ?></strong> -
<?php
echo $row['news_tot_comments']; ?> comments
</span>

</li>
<?php } ?>


...naturally this is only a basic example you have to modify to work on your site (for example limiting the number of news you want to display).


Step 3: CSS Code
Now take a look at the CSS code I used to simulate a Newswine LIVE panel:

#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0;
width:300px;
height:344px;
}
#NewsTicker h1{
padding:6px; margin:0; border:0;
background:#dfe9d5;
color:#000000;
font-size:11px;
font-weight:bold;
}
#NewsVertical {
width:300px;
height:300px;
display:block;
overflow:hidden;
position:relative;
}
/* --------------- */
/* Ticker Vertical */
#TickerVertical {
width:300px;
height:300px;
display:block;
list-style:none;
margin:0;
padding:0;
}
#TickerVertical li {
display:block;
width:288px;
color:#333333;
text-align:left;
font-size:11px;
margin:0;
padding:6px;
float:left;
}
#TickerVertical li .NewsTitle{
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
}
#TickerVertical li .NewsTitle a:link,
#TickerVertical li .NewsTitle a:Visited {
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
text-decoration:none;
}
#TickerVertical li .NewsTitle a:hover {
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
margin-right:10px;
}
#TickerVertical li .NewsFooter{
display:block;
color:#000000;
font-size:10px;
margin:6px 0 14px 0;
}


CSS code is very simple and you can modify it without problems to adapt to your site style.

Step 4: Javascript function to enable vertical scroller
Last step is adding this JavaScript function to enable vertical scroller provided from Capitol Media. I didn't add the code in this page but you can find it downloading the source code of this tutorial.



You have just to copy and paste JavaScript code without changing nothing. If you want, you can set the speed and delay (in milliseconds) for news transition.

It's all! Now use the following links to download the source code which you can use in your project customizing CSS style and contents or to see how it works:

Download source code Live Preview

blog comments powered by Disqus
Jakal said...

Hi dude! You save me!!!! Thanks a lot for this post :)

Ale said...

Oh, thank you, is very useful. But I have one question. I'm from Argentina and our language use special signs like á or ñ and when I try use this code I can't see these special signs.

Exist a possibility that these special sings can be used?

Sorry for my poor english xD

Anonymous said...

Thank you! Very useful post! I was looking for something like this!

Vin Thomas said...

Thanks for the live preview! This is awesome!

Anonymous said...

Nice posting, way to fast to read, but yes, a good one!

fooin said...

Quiero esto para mi canal de twitter.cl!!

Anonymous said...

Awesome! If it could support RSS feeds it would be perfection!

Mohsen said...

Great and fresh tutorial!
Thanks

Karl said...

Nice :)

Bali said...

Cool example with full description....:)

Janko said...

Very nice :)

Anonymous said...

I agree with anonymous #3, if we could see an example that used an RSS XML as a data source that would help out the non programmers among us.

Thorsten said...

Nice thing, but I'm missing a stop function on mouseover. Would make sense when working with long text. Good work!

meester Filip said...

This is a super script! One more thing (to make it just perfect :-)) ... is it possible; when you hover with your mouse over the news-ticker-div that the box stops from scrolling. I know you can slow down the speed but then it takes to long for all the articles to pass. When you hover over an article that you like the script should stop so that people can read it. Is this possible?

Thankx!

DiM said...

Great !!! I try it now :-)

donk.usa said...

So this will work to add any news feed?

Lara said...

Thank you!

ina said...

Thanks! This entry is very cool!
I'm just trying to code like this.
So this entry is very useful for me.
I'll try to code like this more!

Thanks a lot!

akkad said...

Yes, if you make the RSS feature working, it will be a hit

dondmcg said...

This script is absolutely awesome. I was wondering if there is a way to add two tickers to the same page. I added two to a page and added the script below each one but the one on top over rides the one on the bottom. If there are two items in the top it scrolls but the bottom doesn't and if there is only one in the top the bottom one scrolls is there a way to enable multiple tickers on one page?

Also, was there ever a response to the question about the mouse over pause function? This would be an awesome addition.

Erevos said...

As always, amazing and inspirational. When I come to Rome for my post grad degree remind me to work together. We're gonna make GAZILLIONS? :P

Ken said...

@dondmcg: Two tickers is possible, it's very easy.

Copy and paste the last JS line:
var vert = new Ticker('TickerVertical',{speed:800,delay:4000,direction:'vertical'});

I had to make some CSS corrections, but that's easy too.

------

The only thing I think is 'annoying' is that the first UL LI item, when page is loaded, is scrolling to the 2nd UL LI item?

Gr, Ken

Btw: A pause on hovering would be nice indeed!

Anonymous said...

To pause/resume on enter/exit use the following:

Add a variable for the timer.

var mytimer = null;

Add the following functions:

pause: function() {
$clear(mytimer);
mytimer = null;},
resume: function() {
if (mytimer == null) {
this.next();}},

In the next function, set the mytimer var to the delay timer.

mytimer = this.next.bind(this).delay(this.options.delay+this.options.speed);

In your domready, add two events for the NewsTicker div.

$('NewsTicker').addEvent('mouseenter', function() {hor.pause();});

$('NewsTicker').addEvent('mouseleave', function() {hor.resume();});

queeniyang said...

it's very nice post.
i love it.

mlg said...

I'm trying to make this work with my wordpress database. I'm having trouble getting it to connect to the database or pointing out the right tables for it to read. I'm a bit of a noob, sorry, but any help would be nice.

Thanks

ejpark said...

For us MOOTOOLS newbies - can someone please tell where the various pieces of code go for the pause on mouseenter/resume on exit? Which files to edit and where in the files?

TIA

Shane said...

@ejpark: Use the following for your mouse events. This can be added to any js file or in a javascript section in the html itself.


window.addEvent('domready', function() {
var hor = new Ticker('TickerVertical', {
speed : 500, delay : 5000, direction : 'horizontal'});
$('NewsTicker').addEvent('mouseenter', function() {hor.pause();});
$('NewsTicker').addEvent('mouseleave', function() {hor.resume();});
});

James said...

Nice post

only one note:
for use on mootools 1.2.0

replace

getSize().size.y;
with
getSize().y;

getSize().size.x;
with
getSize().x;

Fx.Morph
with
Fx.Styles

Marius said...

@james: great tip, only one small problem. You have to replace Fx.Styles with Fx.Morph (it's the other way around)

dulceserenidad said...

Where do you paste the javascript code??

James said...

tnx Marius i write in wrong sequence

the correct code is:

----------------------------

for use on mootools 1.2.0


find
getSize().size.y;
replace with
getSize().y;

find
getSize().size.x;
replace with
getSize().x;

find
Fx.Styles
replace with
Fx.Morph

---------------------------

medo said...

wonderful

but how to make it move to the right ???

thanks man

Ghus said...

Great code and great blog =D.
I has trying to implent de dom ready code to stop the news from scrolling when the mouse is houver it. But it doesnt work.this code is to for mootools v1.1 or v1.2.
Any suggestion?

Anonymous said...

ok so ive inserted the lines of code to try and fix it to stop on mouseover, but its giving me errors of "hor not defined".

im calling it by:
onmouseover="hor.pause();" onmouseout="hor.resume();"
in the NewsTicker div.

and the javascript i use is:
var mytimer = null;
var Ticker = new Class({
setOptions: function(options) {
this.options = Object.extend({
speed: 1500,
delay: 5000,
direction: 'vertical',
onComplete: Class.empty,
onStart: Class.empty
}, options || {});
},
initialize: function(el,options){
this.setOptions(options);
this.el = $(el);
this.items = this.el.getElements('li');
var w = 0;
var h = 0;
if(this.options.direction.toLowerCase()=='horizontal') {
h = this.el.getSize().size.y;
this.items.each(function(li,index) {
w += li.getSize().size.x;
});
} else {
w = this.el.getSize().size.x;
this.items.each(function(li,index) {
h += li.getSize().size.y;
});
}
this.el.setStyles({
position: 'absolute',
top: 0,
left: 0,
width: w,
height: h
});
this.fx = new Fx.Styles(this.el,{duration:this.options.speed,onComplete:function() {
var i = (this.current==0)?this.items.length:this.current;
this.items[i-1].injectInside(this.el);
this.el.setStyles({
left:0,
top:0
});
}.bind(this)});
this.current = 0;
this.next();
},
pause: function() {
$clear(mytimer);
mytimer = null;},
resume: function() {
if (mytimer == null) {
this.next();}},

next: function() {
this.current++;
if (this.current >= this.items.length) this.current = 0;
var pos = this.items[this.current];
this.fx.start({
top: -pos.offsetTop,
left: -pos.offsetLeft
});
mytimer = this.next.bind(this).delay(this.options.delay+this.options.speed);
}

});

var vert = new Ticker('TickerVertical',{speed:1000,delay:2000,direction:'vertical'});

can someone please give me a hand with how to get it working?

thanks.

cesar said...

great code. can someone post a link to an example with full code for mootools 1.2 and pause/resume script.

I've gotten the moo 1.2 to work, but the pause event is not working. thanks.

Ghus said...

Antonio can you solve the problem of stop the news from scrolling when the mouse is hover it,please.

Thanks

Anonymous said...

Hi,
first of all thanks for this great job! I'm sure that the ticker is great!!
But i'm having a problem, i used the php entries from a database and everything seems to work, except for the vertical scrolling!! I really don't know why i only see a div with my images, but no vertical scrolling of my news... Anyone has some ideas?

Berat said...

thank you

Ing. Daniel said...

Thanks grait work

Look this, I made a Joomla's Module from this Script

Clic Here to go joomla extensios

I give you the Respective Credits...

Thanks a lot!!!!

canarkadas said...

Hi, very very thank you, perfect script .

Please write "Recent Entries" code full Wordpress.

Thank you Again .

Валерий said...

for mootools 1.2.1 use

window.addEvent('domready',function(){
var vert = new Ticker('TickerVertical',{speed:1000,delay:2000,direction:'vertical'});
});

instead

var vert = new Ticker('TickerVertical',{speed:1000,delay:2000,direction:'vertical'});


because an error occured

Richard said...

Could someone tell me how to make this a horizontal ticker which just scroll like a marquee please?
email @ migarich@yahoo.fr

Thanks

Ken said...

Can this code be used with Active Server Pages ?....if so is there any code available displaying this ?


Thank You,

Ken

Yaddein said...

Hello,
It is really a nice work, but i am unable to convert this code for mouse-over pause/resume.

Please help me about this task.
I really need it.

Daryo Tabayani Siampa said...

Beautiful... I love it

Alan said...

Love this widget, but can not get the pause over to work in 1.2...

Anybody got the regenerated 1.2 script, pretty please?

Anonymous said...

awesome script. I am wondering though how easily, or can you let me know how to alter the script so that

1 - The top item in the list fades to blank

2 - The next set slide up.

So kind of like on newsvine but in reverse. I want the visible item to fade away and then have the rest slide up.

Is that possible?

blokeman said...

isit possible to have the top item fade out before the rest of the content slides up? kind of like the opposite to newsvine

Adam said...

Does anybody know how I can remove the pause? I just want this to scroll continuously at the same speed.... help!

Anonymous said...

hi, i'm using this script with mootools 1.2 and trying to personalize two of them in the same page, but it seems that the parameters passed in "var vert = new Ticker('TickerVertical',{speed:1000,delay:8000,direction:'vertical'});" is ignored. it uses the default values for both scrollers.
anyone has the same prob?
tnk

Randall said...

I came about your blog just by chance... this has been better explained. I have spent considerable time on the original script but yours worked immediately.

I was able to tweak the mysql a bit for my needs. I have set it to show summary photo title and date with a order by recent date and limited to 4 results. The images are not showing yet but i can use it with out the images. I am using this on a test box running centos.

Just testing at the moment I will forward link soon as I load on client site.

Thanks for your post very helpful!!!

lostintype said...

hi Antonio, I am using the script on one of my projects. How can I insert a previous or next button?

hysin said...

Has anyone seen that with the Opera browser, there are problems with the overflow of the page?

blokeman said...

Whilst I love this scriot, I have found that it also causes memory leaks, and Internet Explorer is also heavily effected by this. (IE8 warns you and stops the script)

I am not sure specifically what it is in the script, because I don't know enough about Javascript but I will see if I can find what it is.

If anyone has any ideas, please let me know

Anonymous said...

"lostintype" on trying to do the same thing. I've figured out the "Next" button, but I'm stuck on the "Previous" button.

Add this to "domready" section of the code. Then add the "Next" button to the HTML code. If it was initially Paused, after someone clicks "Next" it will start Playing again automatically.

$('next').addEvent('click', function() {
hor.pause();
hor.next();
$('stop_scroll_cont').style.display='block';
$('play_scroll_cont').style.display='none';
hor.resume();
});

Can anyone help with a "Previous" button?

Derrick said...

Could someone tell us if there's a "working" version that doesn't produce errors with 1.2.1?

Anonymous said...

I need to have two scrollers on the same page. So i've copied the line as suggested earlier in this blog. The line i cut and paste is

var hor = new Ticker('TickerVertical', {
speed : 500, delay : 5000, direction : 'vertical'});

That did not work. So I gave the new one a new name as 'TickerVertical2'with rest being the same.

var hor = new Ticker('TickerVertical2', {
speed : 500, delay : 5000, direction : 'vertical'});

This worked in getting both scrollers scrolling. Now the controls do not seem to work properly. When I click 'stop' for the top control, the scrolling does not stop, instead the bottom one stops and does not start after that at all. Top one continuosly scrolls. Any suggestions on a fix ?

Anonymous said...

is there any known problem in viewing the scrollers with popular browsers? (including ie6)

Anonymous said...

Hi

Trying to hook this up to a SQL database using ASP. Anybody done this?

nicdev said...

Exactly what I needed, thanks!

Lore said...

Hi, I want use this script, but I have to work with mootools 1.2.1...
It doesn't work with this mootools version? How I can fix this? thanks!

dusan said...

thanks a lot m8. really useful script. best wishes, Dusan.

Anonymous said...

for previous button, you must only copy function next() and rename on previous() than replace in the code: top:-pos.offsetTop,left:-pos.offsetLeft on this: top:+pos.offsetTop,left:+pos.offsetLeft i dont test it but should be a work... so good luck ;-)

Anonymous said...

Great script! but, it seems to scroll up immediately on page load. It there a way to implement a delay before the first move takes place?

meganlee1984 said...

great post, I just implemented it on one of my site today!

  • 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