O'Reilly

Link Nudging Using Dojo

By on  
Dojo Toolkit

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.

The JavaScript: Better Solution

dojo.ready(function() {
	dojo.query('a.nudge').forEach(function(link){
		var left = dojo.style(link,'paddingLeft');
		dojo.connect(link,'onmouseenter',function() {
		    dojo.anim(link, { paddingLeft:20 });
		});
		dojo.connect(link,'onmouseleave',function() {
		    dojo.anim(link, { paddingLeft:left });
		});
	});
});

Dojo lead Pete Higgins showed me a more condensed version of his script.

Simple, no? The best way to learn to use any JavaScript framework is to duplicate a given set of code you are familiar with, much like we did here. What do you think about this Dojo example? Look close to jQuery and MooTools?

Track.js Error Reporting

Upcoming Events

Recent Features

  • Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API,...

  • How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

Incredible Demos

  • PHP IMDB Scraper

    It's been quite a while since I've written a PHP grabber and the itch finally got to me. This time the victim is the International Movie Database, otherwise known as IMDB. IMDB has info on every movie ever made (or so it seems). Their...

  • Introducing MooTools ElementSpy

    One part of MooTools I love is the ease of implementing events within classes. Just add Events to your Implements array and you can fire events anywhere you want -- these events are extremely helpful. ScrollSpy and many other popular MooTools plugins would...

Discussion

  1. The mouseenter/mouseleave thing is so common it is actually combined as an API in plugd (soon to be in Dojo proper). With plugd, the Dojo code could look like:

    $.ready(function() {
    	$('a.nudge').forEach(function(link){
    	    var $link = $(link), left = $link.style('paddingLeft');
    		$link.hover(function(e){
    		    $link.anim({ paddingLeft: /enter|over/.test(e.type) ? 20 : left})
    		})
    	});
    });
  2. Couldn’t agree more on what you said: “The best way to learn to use any javascript framework is to duplicate a given set of code you are familiar with”

    By the way, I think the Mootools code is more semantic than the rest, I mean, with jQuery one has to know that .hover is an event, unlike MooTools which says .addEvent.

    I liked Dojo’s aproch, but the .connect is new to me, but just by reading it I understood that it will connect link to the event and the function.

    Very nice example and keep up the good work.

  3. Jack Franklin

    Hi Rafael / David

    @Rafael F P Viana: You can use jQuery’s bind method which is the same as MooTool’s addEvent essentially.

    Good post David, I actually really like Dojo’s layout so I might investigate. However, it’s clear that MT/jQ are the top two so I think I’m concentrating my skill on those two.

  4. Brad Pritchard

    Nice one. One note/question – if your anchors needed a default padding-left of 15px, then the effect would be muted a bit. Rather than setting padding-left to a static 20, what about changing line 5 to a relative 20?


    dojo.anim(link, { paddingLeft: (left + 20) });

  5. @Brad Pritchard: Much better — I’ll update the post!

  6. Sid Burn

    Do you just limiting to Dojo Base? In Dojo Core there is dojo.behavior that has some additional functionality.
    http://www.dojotoolkit.org/api/dojo/behavior.html

    With dojo.behavior you can write your code like this:

    dojo.require("dojo.behavior");
    dojo.ready(function(){
      dojo.behavior.add({
        'a.nude': {
          'onmouseenter': function(evt) { 
            dojo.anim(evt.target, { paddingLeft:20 }); 
          },
          'onmouseleave': function(evt) {
            dojo.anim(evt.target, { paddingLeft:left });
          }
        }
      });
      dojo.behavior.apply();
    });
    

    The good part on dojo.behavior is that you can call dojo.behavior.apply() as often as you like. It only updates your DOM incremental. Meaning it only adds the events to newly created DOM nodes, or only add things to a node that you added after the last call to dojo.behavior.apply().

    That means you can do some ajax add nodes to your DOM, and call dojo.behavior.apply() after it. And the new nodes get your defined behavior.

  7. @Sid Burn: Thanks for the tip Sid. By the way, I’ve never given a link the “nude” tag before. :)

  8. Sid Burn

    Ah “nude” oder “nudge” for a non-native english speaker it is almost the same. ;)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...