unobtrusive scrolltext with mooTools
recently handgestrickt is really crazy for mooTools. we developed a whole bunch of unobtrusive scripts, we will publish in the future.
yesterday we had a quite simple task: we needed a scrolltext. unlike the 5 million DHTML solutions out there, where you have to fiddle your scrolltext into the JavaScript code, we wanted a scrolltext that changes any normal element with the classname "scroller" and a CSS-overflow to a scrolltext.
in mooTools this is very easy. we did the same trick as in old C64-days. first we measured the whole width of the scroller plus the width of the element. then we copied the same text at the end of the scrolltext, to make it look infinite. when the scrolltext reached the point, where it starts over, we just reseted it to zero.
following mooTools dependencies: mooTools 1.11 (Fx.Scroll, Fx.Transitions, Window.DomReady, Element.Selectors)
tested in: Internet Explorer 6.1 and 7, Firefox 1.5 and 2.0.0.6, Opera 9.01, Safari 3.0.3, Konqueror 3.4, Galeon 1.3, Mozilla 1.7.5, Epiphany 1.6. so in the modern browsers it can be assumed to work well.
usage: just give any element a classname "scroller" and a CSS-overflow and it scrolls! on line 20 you can change the speed (150 looks good).
here is the final code:
var unobtrusive_scroller = new Class({
initialize: function() {
window.addEvent('domready',this.prepare.bindAsEventListener(this));
},
prepare: function() {
var scroller = $$('body')[0].getElementsByClassName('scroller');
for(a=0;a<scroller.length;a++) {
var old_length = scroller[a].innerHTML.length;
scroller[a].innerHTML += ' ';
var old_size = scroller[a].getSize();
scroller[a].innerHTML += scroller[a].innerHTML;
this.scroll(scroller[a],old_length,old_size.scrollSize.x);
};
},
scroll: function(el,chars,x) {
new Fx.Scroll(el,{
'transition':Fx.Transitions.linear,
'duration':(chars*150),
'wheelStops':false,
'onComplete': function() {
var _this = this.options._this;
var el = this.options._el;
var chars = this.options._chars;
var x = this.options._x;
el.scrollTo(0,0);
_this.scroll(el,chars,x);
},
'_this': this,
'_el': el,
'_chars': chars,
'_x': x
}).scrollTo(x,0);
}
});to initialize it, add the following lines to your HTML-page
<script language="JavaScript" type="text/javascript">
var my_scroller = new unobtrusive_scroller();
</script>