During the development of YoungDutchDesign.com I was searching for a Mootool based news ticker script. I’ve found the great news ticker script from Antonio Lupetti but this one wasn’t compatible with Mootools 1.2 and all the tips in the comments were not sufficient. So here we are, a fresh build of a simple news ticker: The cvNewsTicker class.
The html
The css
.newsticker {
height: 300px;
width: 500px;
display: block;
overflow: hidden;
position: relative;
}
.images {
height: 270px;
width: 270px;
}
img {
border: none;
}
.newsticker ul li {
/*float: left; add the float: left when you prefer a horizontal news ticker*/
display: block;
width: 480px;
padding: 10px;
font: .8em Georgia, "Times New Roman", Times, serif;
}
.tickertitle {
display: block;
font: bold .9em Georgia, "Times New Roman", Times, serif;
}
.tickerimg {
float:left;
margin: 0px 15px 15px 0px;
}
The javascript
window.addEvent('domready', function() {
var news = new cvNewsTicker('tickerimages',{speed:500,delay:5000,direction:'horizontal'});
});
Changelog
- V1.0.1 – 7 dec 2009
- Added a delay when the page is loaded
- Added a delay when the page is loaded
- V1.0 – 17 apr 2009
- First release of the news ticker class
Comments (12)
Dave Buchanan says:
Hi Crispijn
I like your updated tool for mootools 1.2
I get some strange behaviour which I have tracked down to the css
If the margin and padding is not set as
* {
margin: 0px;
padding:0px;
}
The scrolling moves from left to right a bit
I wonder if you could help me correct this so I dont have to set the padding and margin globally
Crispijn says:
Hi Dave!
Just set the padding and the margin for the div element to zero. So here an example:
.newsticker {
margin: 0px;
padding: 0px;
}
and
#tickerimages {
margin: 0px;
padding: 0px;
}
Tip: I always set the total margin and padding to zero on the top of a css file, just to make sure I’m completely in control when I add new elements to my website. So take notice of this tip to avoid nasty alignment problems in the future!
Max Tite says:
Hi Crispijn,
I have just added your News Ticker to a site I am developing, and it works very well. However, this is my first time using MooTools and I have a slight problem.
The first frame proceeds to the next frame on page load without the specified delay. How can I ensure that the first frame is paused before proceeding to the next frame.
I have attempted to tinker with the script but have only succeed in breaking the control.
Many thanks
Max
Crispijn says:
@Max Tite:
I’ve added a delay when the class is initializing! This makes the class exactly like the original 1.1 class but than for Mootools 1.2.
Enjoy!
Max Tite says:
Hi Crispijn,
I misdiagnosed the problem; I think the problem was the DOM was ready before the page had finished loading. So there was a delay for the initial frame, but I wasn’t seeing it happen as the page was still rendering.
I have changed the initial News Ticker function call to the following:
window.onLoad = window.addEvent(‘domready’, (function() {
2 var news = new NewsTicker(‘Ticker’, { speed: 2000, delay: 2000, direction: ‘horizontal’ });
3}).delay(4000));
If this is weird let me know?
Additionally, in the Ticker script you seem to be setting the duration of the transition using the default variable options.duration, and not the passed in options.speed.
Let me know if any of this is wrong, as this is my first MooTools experience.
Many thanks
Max
Crispijn says:
I think you have to try to loose all the stuff on the domready argument, just put all the Mootools between this argument.
I’ve added the delay in the initialize function in the class. This function executes when the dom is ready and solves your problem.
I’ve added a short discription to the class in the option section. Now you can see what every parameter is doing!
I hope this works for you!
Cheers!
Max Tite says:
Sorry to be a pest, but the script seems to be the same as before.
Max
Crispijn says:
Did you tried Ctrl + F5 and how is my example on this site? If this doesn’t work please send me an email with the url of the page you’re working at!
Crispijn
Queenie says:
Is there a way to stop rolling when mouseover?
sauljp07 says:
Hola, muchas gracias… de verdad de gran ayuda
saul says:
hello to mootools 1.4 will not there an update?
Crispijn says:
@saul:
I’m working on an update and I’ll look to the 1.4 compatibility. I’ll post a new comment when it is ready.
Cheers!