Click here to print.
Click here to print.
Posted By Dustin Diaz On 2nd July 2006 @ 08:00 | 135 Comments
I will admit straight up front - I don’t like writing long articles. There, I said it. I passed College English convincing my professors that I should be rewarded more for my creativity rather than the length of my prose. I’m the kind of guy that spent more time writing short stories than huge complicated essays. Eventually I went on to write for the school Newspaper, a.k.a. The State Hornet1 which gave me the freedom to keep my stories to a minimum of 500 words, or just a couple of paragraphs.
Today that legacy still stands and has transferred into my love for making widgets. No, not those widgets2. I’m talking about those little goofy things you do on a Sunday afternoon from when you had that idea on Saturday night which left you frustrated on Friday after work. Yes, you’re not the only one with crazy ideas.
I’m talking about sliders, yoyos, tooltips, shakers, better looking code, faster queries, and random jubilees of DOM hoopla. It’s those small things that some of us live to create and find it rewarding even if it’s one line of code. And although these little works of ‘code art’ don’t always work on all browsers while having labels of ‘experimental’ written all over them, don’t feel ashamed of them. They come from you and you should embrace your work. You are, a Web Professional.
In this article I’m going to share some of my short stories
, poems
, and random sonnets of affectionate escapades I’ve had with JavaScript during the last few months, which I’ve built using the Yahoo UI3 utilities. Some are rather embarrassing, others useful, and yet others I feel are just downright sexy. If you see something you like, feel free to take it, tweak it, and make it your own. This is what some poetry afficionados of secret societies would call a poetry slam
. So for want of a better phrase, this can be a <code slam>.
The Script.aculo.us4 Effects library vs the YUI Animation utility5. Script.aculo.us offers you some pretty sweet looking effects like Fade, SlideUp, BlindDown, Shake, etc.. You can even add Parallel effects (way to go Thomas). On the flip side, the animation util doesn’t aim to give you these canned effects to package up with your web app, but rather it lets you make up your own effects by giving you the finely crafted tools (like a utility knife) to make what you want.
Another reason I like YUI is that it isn’t out to change the language itself, but rather it solves many of the cross-browser incompatibilities that we run into on a daily basis. Beyond that, it does quite a few other sexy things that I think you might like.
Below is a compilation of fifteen things that I have either developed over the last few months, or have been inspired by a friend (who will receive full credit on the original idea). Enjoy!
These days, when you’re working with the DOM, it’s all about getting the elements you want, with conditions applied. Thankfully the Dom util doesn’t go all out and try to do all the guesswork for you resulting in a bulky library with large sets of unwanted code. Instead it gives you a handy method for you to work with called getElementsBy.
Let’s kick off our slam with the classic getElementsByClassName (which is actually in the utility by default). I like to think of it as our token example by the YUI folks showing off how getElementsBy can work natively within your functions. See Demo6
This method is not in the Dom util by default, but demonstrates exactly how we can add it in if we wanted. See Demo7
This function allows you to get outbound or inbound links returned to you as an HTMLElement collection. At that point it’s up to you what you want to do with your array of elements (eg. bind event listeners or run a method against them). Currently this is untested on IP address URIs, but I presume that won’t be an issue for most situations. See Demo8
Because everyone enjoys California cheese.
Paginating through large data sets and keeping someone’s attention can be a tedious task. Sliding results within a container is one way to keep a person entertained. See Demo9
These are classic effects that almost any animation lover would want in their toolkit. For the sake of making them a macro, here they are. See Demo10
A demonstration of animating a box from any given corner. See Demo11
Most folk don’t know what mutation events are, mainly because they don’t work in IE6. These are events just like regular DOM events like ‘click’,’mouseover’, or ‘mouseout’ that you can listen for. Just to name a few there are ‘DOMNodeInserted’, ‘DOMNodeRemoved’, and ‘DOMNodeInsertedIntoDocument’. For a better reference you can see Wikipedia’s entry on DOM events12 and search for the Mutation events within the event table. Anyway, here’s how you can simulate some of those events using the CustomEvent class.
Create some elements, listen for the event, then make them draggable. See Demo13
Create some elements, then remove them to update an information box. See Demo14
There really is an endless amount of Custom Events that you can create. So we’ll keep this to a minimum. Here are three places that the CustomEvent can come in useful:
Currently, the Drag and Drop utility is packaged with quite a few custom events you can override such as startDrag, onDrag, or endDrag. However the problem is that you can’t subscribe to any of these, only override. Here is one trick you can use to make them subscribable
. See Demo15
This is a combination of animation and custom events where we show menu items sliding into view and firing off subscribable events. See Demo16
None of these have any rhyme or reason. But I tend to think that in some place or another, they can solve a problem.
Here we have an OO version of Sweet Titles17 that allows us to declare multiple instances of tooltips on separate elements with some optional configuration parameters you can pass into the constructor object to get that exact look and feel you want out of a tooltip. See Demo18
For the sake of doing something that’s already been done, here’s a faux light box effect that can be obtained using some core tools. See Demo19
YAHOO.util.Dom.batch alone may convince you of how cool the DOM Collection utility can be. This shows you how you can batch an HTML Element collection to a method. (Thanks Matt Sweeny) See Demo20
For some reason or another, this always seems to create some noise regardless of its controversial nature. Here is a very simple way to do it with Event, DOM, and some of the tools we’ve defined in this very article. See Demo21
This is a combination of using the CSS Grids toolkit and swapping out the templates using JavaScript animation See Demo22
At least for this article’s sake. There are plenty of other things you can making using the Yahoo! UI utilities and this has only scratched the surface. I hope it was as fun for you as it was for me.
Like this article? Digg it23!
Article printed from Vitamin Features: http://www.thinkvitamin.com/features
URL to article: http://www.thinkvitamin.com/features/javascript/15-things-you-can-do-with-yahoo-ui
Click here to print.