Dojo Goodness, Part 3 (Animation Station)

by Matthew Russell

A dose of animation can give your app that extra bit of pizzazz that it sometimes needs to impress the customer/ladies/gentlemen/whatever-floats-your-boat, so I thought it might be a good idea to quickly showcase some of Dojo's animation facilities.

If you're just now tuning in, you can click on my mugshot or this link to get to the first two posts of the ongoing "Dojo Goodness" series that I'm writing to promote my upcoming book, Dojo: The Definitive Guide, which is available on Amazon as well as the O'Reilly catalog.


Matthew Weier O'Phinney
2008-03-18 16:11:55
Animations are nice, but sometimes you just want to hide or show an element, with no bells or whistles such as fades and whatnot. I've studied the tutorials, Dojo book online, and API docs for hours, and yet this one simple thing -- something built into competitors such as prototype -- I cannot find in dojo. This is where the project fails me -- the simple things are hard, which is not the way it should be. (Don't get me wrong -- I like dojo, and am using it for most of my ajax needs, but this part gets me every time.)
2008-03-18 16:20:31
@Matthew: If I understand you correctly, then you'd perhaps want to just set a node's CSS "visibility" property to "hidden"? If that's all you want to do, then, "visibility", "hidden") would do the trick. If that's not what you're looking to do, let me know. What you're trying to do *should* be a quick one-liner like that...
Matthew Weier O'Phinney
2008-03-18 18:17:14
@ptwobrussel: basically, yes. But it's non-intuitive -- prototype has hide() and show() which are simple and tell you what they're doing. (Internally, hide() sets the display property to 'none', so in dojo you could do similarly, and indeed I've done so.) Dojo has great utilities and functionality -- don't get me wrong. The grids and charts are worth their weight in gold. But the simple things people do everyday -- autocompletion, hiding and showing nodes, etc. -- do not have simple, well-documented solutions. That's the one area where I'd like to see dojo improve.
2008-03-19 12:06:48
@Matthew: Well, just so you know, we are *very* serious about improving documentation--hence, my upcoming book and the much improved API docs online to name two. The site is also starting to see some really good growth. But as you hint, it won't all happen overnight, and your desire for better documentation is a very fair one.

One other important thing is to consider that somewhat differentiates Dojo is that it doesn't attempt to create an entire artificial layer on top of DHTML. Rather, it tries to plug holes where they need to be and leaves the rest as is. I can't say this authoritatively, but I would suspect that was the pragmatism used with not having something like a and dojo.hide function i.e. the rationale might have been to leave it to since we're essentially talking about CSS styling and already does that quite effectively.

Anyway, just thought that backdrop might be useful. Thanks for taking the time to post something! I hope you'll keep reading

2008-04-23 08:07:07
Now the trick is getting this to work in firefox...I tried and it worked in IE8 beta1, but not in firefox
2008-04-23 08:12:38
oops! I take my last comment back, adblockplus was just blocking out the css sheet, my bad!
2008-07-26 15:35:30
I am a beginner in Dojo. Thanks for this post. It is very informative. I have a question here. When I click on "Fade In/Out" or "Implode/explode" button, it works the first time. But after that, there is no change in the square. Also, if I click "Both!" button first, it works, but then the other two buttons would not work till I refresh the page. Can you throw some light on why this must be happening?
2008-07-26 18:39:29
@Prajakta: The page seemed to work fine for me when I produced it on FF2, and AFAIK, it should work fine everywhere else too. What browser (and version) are you using that results in this behavior? Do you use Firebug? If so, do you notice anything unusual in the console?