The Latest
Introducing MooTools NextPrev
One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you’re simply trying to get to the next or the previous item. MooTools NextPrev is a compact javascript class that allows you to move about a collection of items quickly using human terms.
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
The news items are placed into list items. The UL will be the element that’s animated.
“MooTools as a General Purpose Application Framework” by Christoph Pojer
I wanted to bring attention to an outstanding presentation given by MooTools Core Developer Christoph Pojer. Given at FOSDEM 2010, Christoph provides an overview of what MooTools is, who should use it, how it should be used. Examples are given throughout the presentation.
I highly recommend MooTools users of all experience levels watch this video, as well as jQuery or Dojo users looking to simply understand what this framework is about.
Remove Broken Images Using Dojo
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.
The Dojo Javascript
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!
Link Nudging Using Dojo
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.
The Javascript: Attempt 1
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.