My journey into Dojo javascript has been exciting and I’m continuing to learn more as I port MooTools scripts to Dojo. My latest experiment is porting a simple new scroller from MooTools to Dojo. The code is very similar!
The HTML
The news items are placed into list items. The UL will be the element that’s animated.
The CSS
#news-feed { height:200px; width:300px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee; }
#news-feed ul { position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0; }
#news-feed ul li { min-height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden; }
The absolute positioning is essential to proper animation. Unlike my MooTools example, this example no longer requires a fixed height for each news item. I did add a minimum height so only one item shows up within the scroller window at a time.
The Dojo Javascript
dojo.require('dojo.NodeList-fx');
dojo.addOnLoad(function() {
/* settings */
var list = dojo.query('#news-feed ul'),
items = list.query("li"),
showDuration = 3000,
scrollDuration = 500,
scrollTopDuration = 200,
index = 0,
interval;
/* movement */
var start = function() { interval = setInterval(move,showDuration); };
var stop = function() { if(interval) clearInterval(interval); };
var reset = function() {
list.anim({ top: 0}, scrollTopDuration, null, start);
};
/* action! */
var move = function() {
list.anim({ top: (0 - (dojo.coords(items[++index]).t)) }, scrollDuration, null, function(){
if(index == items.length - 1) {
index = 0-1;
stop();
setTimeout(reset,showDuration);
}
});
};
/* stop and start during mouseenter, mouseleave */
list.onmouseenter(stop).onmouseleave(start);
/* go! */
start();
});
This is where I have the epic description…but the above code (at least for MooTools users) should look familiar. The logic is exactly the same but the code uses dojo.* methods instead of MooTools’ Fx, $$, $, and Element.Dimensions methods.
The MooTools Javascript
window.addEvent('domready',function() {
/* settings */
var list = $('news-feed').getFirst('ul');
var items = list.getElements('li');
var showDuration = 3000;
var scrollDuration = 500;
var index = 0;
var height = items[0].getSize().y;
/* action func */
var move = function() {
list.set('tween',{
duration: scrollDuration,
onComplete: function() {
if(index == items.length - 1) {
index = 0 - 1;
list.scrollTo(0,0);
}
}
}).tween('top',0 - (++index * height));
};
/* go! */
window.addEvent('load',function() {
move.periodical(showDuration);
});
});
The above code was taken from my original post. Take a moment to compare the Dojo and MooTools code.
What do you think? Three Dojo posts in — what are your thoughts about Dojo to this point?
Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!
Create a Simple News Scroller Using Dojo
Related posts:
- Create a Simple News Scroller Using MooTools, Part I: The Basics
- Link Nudging Using Dojo
- Remove Broken Images Using Dojo
- QuickBoxes for Dojo
- Using MooTools 1.2 For Drag, Drop, Sort, Save
Authors