• Demos and Downloads!
• MooTools Plugins
• About / Contact

Create a Simple News Scroller Using Dojo

»

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

	

		
News Item 1
Pellentesque habitant morbi...Read More
		
News Item 2
Pellentesque habitant morbi...Read More
		
	

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?

Discussion

The Bottom Line