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 an effort to get better with the Dojo Toolkit, I’ve decided to port yet another one of my previous posts: Remove Broken Images Using MooTools or jQuery. Broken images are an eyesore to any website so there’s no point to keeping them in the page. Here’s how you can remove them on the client side.
dojo.ready(function() {
dojo.query('img').forEach(function(img){
dojo.connect(img,'onerror',function() {
dojo.destroy(img);
});
});
});
Just as simple as jQuery and MooTools — just a different syntax!
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.