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 news items are placed into list items. The UL will be the element that’s animated.
In the past we’ve tinkered with link nudging with MooTools and link nudging with jQuery. In an effort to familiarize myself with other javascript frameworks, we’re going to try to duplicate that effect with another awesome framework: Dojo.
dojo.addOnLoad(function() {
var links = dojo.query('a.nudge');
//foreach...
dojo.forEach(links,function(link) {
var left = dojo.style(link,'paddingLeft');
dojo.connect(link,'onmouseenter',function() {
dojo.animateProperty({
node:link,
properties: {
paddingLeft: (left + 10)
}
}).play();
});
dojo.connect(link,'onmouseleave',function() {
dojo.animateProperty({
node:link,
properties: {
paddingLeft: left
}
}).play();
});
});
});
Once the DOM is ready, we use the dojo.query method to find all of the links to nudge. For every link we find, we record its original left padding and add mouseenter and mouseleave events to each link to animate its left padding.
News scroller have been around forever on the internet. Why? Because they’re usually classy and effective. Over the next few weeks, we’ll be taking a simple scroller and making it into a flexible, portable class. We have to crawl before we walk though; let’s make a simple news scroller using MooTools.
<div id="news-feed"> <ul> <li><strong style="font-size:14px;">News Item 1</strong><br />Pellentesque habitant morbi...<a href="#">Read More</a></li> <li><strong style="font-size:14px;">News Item 2</strong><br />Pellentesque habitant morbi...<a href="/news/2">Read More</a></li> <!-- more.... --> </ul> </div>
The HTML part is fairly simple: a list with numerous list items (news items) wrapped in a single DIV.
My “Create a Simple Slideshow Using MooTools” series has been hugely successful. The first step was laying the groundwork for the slideshow, the second step was adding controls and events to the slideshow, and the third step was recoding the slideshow into a sexy class. This fourth slideshow tutorial will add thumbnail previews and captions to the slideshow.
I’ve chosen to revert back to the “inline” code from the second tutorial. Why? I’m going a little bit off of the reservation with this one. I think classes are important to use when you want a more generic slideshow; this one will be a bit more customized. That isn’t to say, however, that I wont be creating another class in the future.
One of the sweet effects made easy by javascript frameworks like MooTools and jQuery is animation. I ran across this great jQuery tutorial that walks you through animating a background image of a page. Here’s a quick MooTools code snippet that shows you how you can add this sweet effect to any element on a page.
#animate-area { background:url(bg-clouds.png) 0 0 repeat-x; }
The first step is assigning the image as a background image for our given container. Be sure to repeat the background horizontally!