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 PreviewStep 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>
<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);
?>
$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 } ?>
<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;
}
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;
}
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
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
Hi dude! You save me!!!! Thanks a lot for this post :)
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
Thank you! Very useful post! I was looking for something like this!
Thanks for the live preview! This is awesome!
Nice posting, way to fast to read, but yes, a good one!
Quiero esto para mi canal de twitter.cl!!
Awesome! If it could support RSS feeds it would be perfection!
Great and fresh tutorial!
Thanks
Nice :)
Cool example with full description....:)
Very nice :)
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.
Nice thing, but I'm missing a stop function on mouseover. Would make sense when working with long text. Good work!
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!
Great !!! I try it now :-)
So this will work to add any news feed?
Thank you!
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!
Yes, if you make the RSS feature working, it will be a hit
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.
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
@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!
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();});
it's very nice post.
i love it.
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
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
@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();});
});
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
@james: great tip, only one small problem. You have to replace Fx.Styles with Fx.Morph (it's the other way around)
Where do you paste the javascript code??
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
---------------------------
wonderful
but how to make it move to the right ???
thanks man
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?
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.
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.
Antonio can you solve the problem of stop the news from scrolling when the mouse is hover it,please.
Thanks
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?
thank you
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!!!!
Hi, very very thank you, perfect script .
Please write "Recent Entries" code full Wordpress.
Thank you Again .
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
Could someone tell me how to make this a horizontal ticker which just scroll like a marquee please?
email @ migarich@yahoo.fr
Thanks
Can this code be used with Active Server Pages ?....if so is there any code available displaying this ?
Thank You,
Ken
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.
Beautiful... I love it
Love this widget, but can not get the pause over to work in 1.2...
Anybody got the regenerated 1.2 script, pretty please?
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?
isit possible to have the top item fade out before the rest of the content slides up? kind of like the opposite to newsvine
Does anybody know how I can remove the pause? I just want this to scroll continuously at the same speed.... help!
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
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!!!
hi Antonio, I am using the script on one of my projects. How can I insert a previous or next button?
Has anyone seen that with the Opera browser, there are problems with the overflow of the page?
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
"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?
Could someone tell us if there's a "working" version that doesn't produce errors with 1.2.1?
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 ?
is there any known problem in viewing the scrollers with popular browsers? (including ie6)
Hi
Trying to hook this up to a SQL database using ASP. Anybody done this?
Exactly what I needed, thanks!
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!
thanks a lot m8. really useful script. best wishes, Dusan.
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 ;-)
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?
great post, I just implemented it on one of my site today!