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 Hornet 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 widgets. 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.
Segue
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 UI 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>.
Why YUI?
The YUI utilities give me the expressive freedom to do what I want. And although comparing libraries is generally silly, the best illustration I can give is the Script.aculo.us Effects library vs the YUI Animation utility. 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.
Code
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!
DOM + The getElementBy’s
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.
YAHOO.util.Dom.getElementsByClassName
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 Demo
getElementsByAttribute
This method is not in the Dom util by default, but demonstrates exactly how we can add it in if we wanted. See Demo
getElementsByExternal & getElementsByInternal
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 Demo
Random Effects of Love
Because everyone enjoys California cheese.
Pagination Slide Pattern
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 Demo
BlindUp & BlindDown (Yoyo)
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 Demo
BlindOut
A demonstration of animating a box from any given corner. See Demo
Faux Mutation Events with CustomEvent
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 events 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.
DOMNodeInserted
Create some elements, listen for the event, then make them draggable. See Demo
DOMNodeRemoved
Create some elements, then remove them to update an information box. See Demo
More with CustomEvents
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:
Extending the Drag and Drop
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 Demo
onMenuOpen & onMenuCollapse
This is a combination of animation and custom events where we show menu items sliding into view and firing off subscribable events. See Demo
General Recipes
None of these have any rhyme or reason. But I tend to think that in some place or another, they can solve a problem.
Sweet Titles (YUI Style)
Here we have an OO version of Sweet Titles 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 Demo
Faux Lightbox Effect
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 Demo
Photo Batching
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 Demo
Unobtrusive new windows links
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 Demo
Layout Switching with Grids
This is a combination of using the CSS Grids toolkit and swapping out the templates using JavaScript animation See Demo
That’s All Folks
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 it!
At least “Drag and Drop” doesn’t work in Opera 8.54 made with YUI, and works in Script.aculo.us demo.
[…] Vous ne connaissez pas Yahoo! UI, ae. Un article tout beau tout frais vient de sortir sur Think Vitamin dans lequel l’auteur montre ses bidouillage avec la librairie. […]
Great stuff Dustin, thanks.
Very cool stuff, Dustin! Great examples!
@Arty, “At least ‘Drag and Drop’ doesn’t work in Opera 8.54?” I’m not even sure what that means… does that mean “But unfortunately the rest work fine..?”
Regardless of the matter, remember that the point of many of these demos is that they are more or less proof of concepts and were ‘experimental’. And even regardless of ‘that’ matter, a true Opera fan is already using Opera 9 - and it seems to be working pretty good.
@Carson, thanks :)
@Jeff, thanks dude - glad you liked ‘em. How are the CSS Grids working out for you?
[…] For todays feature, I recommend that you Think Vitamin. […]
Don’t forget about YUI’s fonts.css and reset.css. I’ve recently started incorporating these into new projects and they sure are nice.
Basically one resets all formatting on default HTML elements (but much more than *.* {} as some designers do. The other normalizes font sizes across platforms and browsers. Nice!
Awesome! Thanks Dustin, I’ve been looking for that slider ala iTunes for a little while now.
Dustin, thanks for the write up. It’s appreciated.
At least in Safari 1.3.2 the photo batching demo is a bit schizoid. Clicking on a thumbnail results in a empty white square (i.e. the white outline of a square) showing up in the tray but the animation moves the red thumbnail up to a position to the right of where it should be.
A little playing around with it turned up something. It’s related to the width of the window. The problem doesn’t occur in a window with a width
Does Vitamin have a limit on comment size? If so a little notice and a second chance would be a nice touch. Just chopping off the end of the comment and posting it is not cool.
… there’s no problem if the window size is
Vitamin: your comment code isn’t handling less-than signs correctly.
Attempt #3. there’s no problem if the window size is less than 800px (i.e., when the horizontal scrollbar is visible). At greater widths the red box ends up to the right of where it should be. The wider the window, the more to the right the red boxes end up.
[…] read more | digg story […]
How ’bout that short article?
Always a pleasure reading your stuff…
Regards,
Tom
[…] read more | digg story […]
@Paul: Yeah, after looking at it in Safari, I’m noticing that same funny issue where the boxes line up to the left in that batch demo. I’m wondering if this is a bug in Safari, or the Anim library. Some how things just don’t add up correctly since I’m explicitly giving it an end point to animate toward. A quick nuke on the #doc margin will take care of it so it definitely has something to do with the window width.
That was an interesting one! Goodjob
[…] Using The Yahoo! User Interface Library - an article by Dustin Diaz on Vitamin. […]
Easier scrolling images with Yahoo UI…
This is a great article about the yahoo ui tools. I mention it mainly because they have a nice scrolling widget a lot like what I put together as an example of the things you can do with script.aculo.us (see Smooth Scrolling Image List).
A link to the …
[…] Vitamin Features » 15 Things you can do with Yahoo! UI July 03rd, 2006 | Category: Web 2.0, Web Design, Yahoo | […]
[…] read more | digg story […]
madiun ku madiun bangkit untuk mengarungi dunia yang fana ini
[…] I came across a nice article about using the UI, 15 Things You Can Do With Yahoo! UI and examples are provided. Each example uses the Yahoo! UI. A good read and might give you a few ideas on how to use some Ajax on your site. […]
like rounded corners etc, animated state changes and drag-n-drop interface idioms are certainly about to the rage. twenty four months later, we will all realize that this is frsoting, just frosting. we will scrape it off and get back to building boring reliable secure services. i am already waiting for that day.
Hi Dustin O Javascripter of PodOutcasts
In you neat little demo ipagianted image slider
you have:
case ‘ThumbsNext’:
if ( x === 3 ) {
return;
}
Wouldn’t it be better to show a limit of x images at the time and count all hard-coded images and divide total length of images by x shown images,
This way you can handle x images, the *3* is 4×3
Is there any Mighty Javascripter that can take a look at the paginated demo and see to make some improvements, Yihaaaaaaa
@Dustin Diaz,”Regardless of the matter, remember that the point of many of these demos is that they are more or less proof of concepts and were ‘experimental’.”
When I look to code of this demo, I see basic calls of library functions. I think that these functions should just work well. As Event.observe or Event.stop do. It appears that one of used functions doesn’t.
“a true Opera fan is already using Opera 9 - and it seems to be working pretty good.”
I believe that good web developer doesn’t force users to install update released less then a month ago, so I still use 8.54 at work. I installed Opera9 at home the day it was released.
@SomeDude: ????
@Lynred: Of coure, that would make most sense - that’s what you should actually end up doing. Keyword here being “experimental” - you might end up having to do a little work in the end. It is funny though because I ended up using my own pagination slider for something in production, and that was exactly what I had to do (divide the total results by the amount shown and ceil() the result).
Also, before you show off the results, I think Bill Scott might have something up his sleeve as well when he has time to show it off.
@Arty: I just can’t get myself to empathize with someone who who says something doesn’t work in some minor double digit dot Opera release. I just have to honestly shrug and say oh well. The fact that you’re comparing Event.observe and Event.stop to the YUI Drag and Drop stuff doesn’t even closely relate to the true problem. If you want events, check out the YUI Event util and all that you can do with that (and it works in Opera 8.foo.bar too).
Besides all that - would ya be a good Samaritan and look into what might possibly be the error? What is the Opera console say? Is there a line number you can point me to?
Great work. Batching is sweet. In your Sweet Titles I noticed that you haven’t used the YUI Container module or YAHOO.widget.Tooltip. I’m certain you have a good reason for this. Can you tell me what you reason is?
[…] read more | digg story […]
I didn’t use the container widget mainly because I’ve laid off digging into the widgets themselves - it’s more or less the utilities that have captured my interest at the moment. Aside from the matter, I had developed “Sweet Titles” long before the container widget was around. I more or less wanted to see if I could quickly mock up something similar using the appropriate utilities etc… This demo was in fact more useful for a developer because I’ve made it with more options you can set.
On the flip side, it might be best to at least look into using the container module mainly because it takes the “shim” factor into consideration (the iFrame trick for IE window controls). One thing I don’t know about it though is if it does the classic fade-in affect which gave Sweet Titles its fame (if we can so say that).
Hi Dusty in the wind,
> and that was exactly what I had to do (divide the total results by the amount shown and ceil() the result).
The best option would be find out the actual contentwidth of the wrapper that holds the floated images and compare it to the contentwidth that is viewable (eg in your example that would be 400px)
Dustin,
Is it possible to create thicbox with all features like here http://codylindley.com/Javascript/266/thickbox-update? I dare you …. (can you do it it 4 hours)
[…] Vitamin Features » 15 Things you can do with Yahoo! UI (tags: ajax computer cool! design development javascript html reference research web20 technology yui) […]
15 Dinge die mit der YUI Library erreicht werden können…..
… beschreibt Dustin Diaz in einem schönen Artikel auf thinkVitamin.com.
Die vielen Live Beispiele, deren Quellcode man sich direkt ansehen und für eigene Zwecke verwenden kann, macht den ganzen Artikel “15 Things you can do with Y…
@Geoffroy, that’s kind of been already done. The one in this article was more or less a quick dirty and dry example of it. You could check out some of the other overlay examples they have on YDN.
Some of these concepts are really slick. Good work!
[…] Read Story […]
[…] Vitamin Features » 15 Things you can do with Yahoo! UI […]
Vitamin Features » 15 Things you can do with Yahoo! UI…
I don’t do a lot of web development anymore, but one thing that has caught my eye is the Yahoo! User Interface Library . Vitamin is running an excellent article that showcases15 Things you can do with Yahoo! UI. The article starts off by introdu…
A quick “fix” for the Event/BlindDown example code when IE6 balks at setting height to a non-number. (This occurs when the height or width style properties are not set or are set to auto.)
// in YAHOO.widget.Event, after setting this.height and this.width, add:
if (isNaN(this.height)) {
this.height = this.oEl.offsetHeight;
}
if (isNaN(this.width)) {
this.width = this.oEl.offsetWidth;
}
// additionally, a similar change is required in the BlindDown example
// after height is declared, add the NaN check and assignment
var height = parseInt(YAHOO.util.Dom.getStyle(this.oEl,'height'));
if (isNaN(height)) {
height = this.oEl.offsetHeight;
}
Otherwise, thanks loads for this implementation.
Nathan
Good catch Nathan, that’s definitely something I might have just overlooked. I think since I had specific heights set on the elements it got snuck into the demos. Otherwise that is a perfect example of how you could combat the auto height (and width for that matter).
[…] Vitamin Features has a great page demonstrating 15-things-you-can-do-with-yahoo-ui. Slicken up your web apps with these tips and tricks using the Yahoo! User Interface library Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. […]
[…] http://www.thinkvitamin.com/features/javascript/15-things-you-can-do-with-yahoo-ui […]
@Dustin Diaz:
“would ya be a good Samaritan and look into what might possibly be the error? What is the Opera console say? Is there a line number you can point me to?”
console is just empty : (
I’ve had a hard day and don’t want to debug YUI now
I have been working on something like the BlindDown/BlindUp for sliding out some hidden divs when a user clicks a button…. The problem I keep running into is that I can’t get the height of the div unless it is visible… So if I start my div with display: none; (because its a hidden menu!) … how can I get the proper height to slide it to? Does the YUI kit take care of this? Divs with display: none seem to not know anything about what height they WOULD be if they are showing..
I noticed YUI Calendar does not use the IFRAME shim. :(
Re: YUI CSS Grids — I really dislike Grids’ totally unsemantic naming conventions (names like “yui-g” and “yui-tc” - are you serious?) and the horrible table-like div nesting to achieve perfect cross-browser compat.
Like a previous commentor I really, really like reset.css & fonts.css though — finally my text is the same size in IE & Firefox!
Very good, i’m always looking for some bells and whistles to add to projects. I hadn’t be aware of the capabilities of the YUI.
@Arty: Understood. Concentrate on the things you know best. “YUI is not for everyone” as I generally like to say on my blog.
@Greg: That is more or less of a general development problem than a YUI problem. When an element is set to display none, it doesn’t have width and height properties… you can’t even set its x & y coordinates. You can however do some visibility tricks that may get the effect you’re looking for. What you’re speaking of is the elements ‘display’ (which is different than visibility). If you set your element to ‘visibility:hidden;’ for a brief moment, you can have access to all the normal things you’d want to get out of it.
@Anon: I never mentioned the Calendar in this article but somehow I’m feeling responsible for all of YUI now. Adding your own iFrame shim isn’t that difficult but I would expect this widget getting an update in the near future.
@Jamie: That’s hardly a case against grids.css - if you take into account that you can make over 100+ layouts with the same css file and just following a couple of defined formats in the documentation - it really is a great piece of work. The fact of the matter is, the class names are indeed semantic since we’re defining a grid as we go along. ‘yui-’ is just a prefix so it doesn’t collide with the rest of your class names and ids (think of it as the YAHOO object but for css). yui-main is your main cotent, yui-g is your grid, yui-u is a single unit etc… They’re all explained fairly well in the grids documentation.
As for the fonts and reset, I am indeed also finding their usefulness everyday. Lots of time and thought went into making those css files from Nate Koechley and his team.
@Mike: Yay. Keep exploring the documentation and examples :)
Dustin my main man,
Any examples of YAHOO.util.Scroll by any chance! High five if you have otherwise HI5 too.
[…] I will be out in the next few days to the district annual conference (hoi dong), and so here is my bookmarks I spurled this week… (07 Jul) - Buildix from ThoughtWorks :: project start-up in a box (07 Jul) - InfoWorld Special Report: Virtualization breaks out (06 Jul) - Preaching for True Holiness (05 Jul) - Sysinternals Freeware Free windows utilities (05 Jul) - UnknownReference : The PC Boot Process - Windows XP. How Win XP boot (05 Jul) - Red Swoosh - free your links (04 Jul) - Signum sine tinnitu–by Guy Kawasaki: The Art of the Start Video (04 Jul) - IntelliAdmin.com: Why Windows takes so long to shut down. unused resources are reclaimed. This approach is superior as it works for any known reason that profiles do not unload and also will keep working to address new unknown issues. (04 Jul) - Coupon Codes, Promotional Codes and Discounts at CurrentCodes.com Find Promotional Codes, Discount Codes, Coupon Codes, and more for your favorite online stores. (03 Jul) - The Norman Rockwell Code Movie - A short film parody inspired by The Da Vinci Code. Great spoof on DVC - very well done! (03 Jul) - Ricky?s RAM Dump » The Ancient Writings of David Allen (03 Jul) - American Chronicle: The Six Sins of the Wikipedia (03 Jul) - Vitamin Features » 15 Things you can do with Yahoo! UI some nice thing you can do with yahoo UI. There are nice examples (03 Jul) - Riya - Photo Search face recognition (03 Jul) - Soul Deep - LeadershipJournal.net (03 Jul) - Whatever Happened to Prayer Meeting? - Leadership journal - ChristianityTodayLibrary.com (02 Jul) - squurl.com | rapid domain tools Looking for a domain? Type away. (02 Jul) - Warning Sign Generator (02 Jul) - Table of Contents Dr. Joseph (Rae) Mellichamp, professor emeritus of the University of Alabama, has created a notebook of strategies he has used over years of ministry. This notebook represents the entire spectrum of ministry opportunities for Christian university and college professors and professional staff. […]
Dustin,
This more or less does the trick.
case ‘thumbsNext’:
var o = document.getElementById(’thumbs’);
var f = o.getElementsByTagName(’img’);
w = 0;
for (i = 0; f.length > i; i++) {
w += f[i].width;
}
var result = Math.ceil(w/400);
if ( x === result ) {
return;
}
[…] Vitamin Features » 15 Things you can do with Yahoo! UI Slicken up your web apps with these tips and tricks using the Yahoo! User Interface library (tags: javascript ajax yahoo yui web2.0 tutorial ui dom widgets) […]
[…] Vitamin Features » 15 Things you can do with Yahoo! UI Slicken up your web apps with these tips and tricks using the Yahoo! User Interface library (tags: javascript ajax yahoo yui web2.0 tutorial ui DOM widgets) […]
[…] Dustin Diaz shares some of his recent experiments with the Yahoo! User Interface libraryread more | digg story […]
[…] July bam08:43 pmAdd comment Vitamin Features has a great page demonstrating 15-things-you-can-do-with-yahoo-ui. Slicken up your web apps with these tips and tricks using the Yahoo! User Interface library […]
[…] 15 Things you can do with Yahoo! UI Script.aculo.us offers you some pretty sweet looking effects, it’s animation lets you make up your own effects. Another reason I like YUI: it isn’t out to change the language itself, but rather it solves many of the cross-browser incompatibilities that (tags: YUI) […]
[…] Vitamin Features » 15 Things you can do with Yahoo! UI (tags: ajax css javascript) […]
[…] Inspired by our own Dustin Diaz’s recent post (”15 Things You Can Do with Yahoo UI“) on the new frontend-developer journal Vitamin, we wanted to share with you ten things Yahoo! is already doing with YUI. This list isn’t exhaustive, nor does it suggest that these are the ten most important implementations; rather, these are ten that represent some of the breadth and depth with which YUI is being used within the Yahoo! family. […]
[…] 15 Things you can do with Yahoo! UI […]
[…] Vitamin Features » 15 Things you can do with Yahoo! UI (tags: ajax css dhtml design gui yahoo tutorial yui) […]
A comparison of YUI with Dojo and the newcomer Adobe Spry, would be appreciated.
[…] Vitamin Features » 15 Things you can do with Yahoo! UI (tags: webdesign) […]
This is awesome, I’ve spent a few hours playing with YUI and it seems solid. One thing though, what’s the YUI version of writing your own classes like prototype?
For example with prototype you can do
var myClass = Class.create();
myClass.prototype = {
initialize: function() {
}
}
For everything in Prototype, or Dojo, or WhatHaveYou, there is not always going to be a YUI equivalent. If you’re looking for a cool way to manage classes such as extending a superclass, look no futher than YAHOO.extend
[…] http://www.thinkvitamin.com/features/javascript/15-things-you-can-do-with-yahoo-ui […]
[…] http://www.thinkvitamin.com/features/javascript/15-things-you-can-do-with-yahoo-ui […]
Hello and thank you very much for your presentation of those animations, these are great.
I’m trying to make a toggle animation with “height” with the example you’ve made for BlindUp & BlindDown.
but what i want to do is maybe impossible:
i have a box container, wich include two divs : a div for a title and a div for a content.
i want my div for a content to be display:none, and the content of this div can change and is never the same.
the animation i want to make is the following:
to click on the title and it will show the content of my second div with a blindDown effet.
but this cause a problem cause my div content is display:none, and i can’t get the height property then.
after the div content open, i want that if the user click again the title it will have an blindup effect.
do you think it’s possible without setting height of the div content and display:none ?
thank you ,
regards,
Alex
Hi Dustin, my man. That was an exciting list you have featured here! Awesome.
Excellent article. Love the demos. If you’re not familiar with this, Jason Slocum has greatly extended the YUI library.
Glory to Web 2.0!
Who uses Opera anyway. I saw it’s time to send that old horse to the glue factory.
Is it sentimental value that keeps people using Opera? I don’t now. What I do know is that Firefox is blazing a trail into the future. Wagons Ho!
[…] With that in mind, and borrowing some concepts from an inspiring article I wrote a simple extension to the YAHOO.util.DD class that creates custom events that can be subscribed to by any number of listeners. […]
is there a way to make drop down autoincrement search , from database
[…] web2 ajax xml javascript css json xmlhttprequest asynchronous email this pagedigg this pagereddit!bookmark this pagelink to this pageWhat do thesedo? […]
Very nice article about YUI, I used some of those elements (calendar, reset, etc) before, but this is a nice listing for inspiration!
The mutation event example you mention does NOT use the browser’s feature. The browser should fire a DOMNodeInserted event when a node is added, but the example creates its own event object and explicitely calls fire() on it!
That will certainly work for all browsers, but doesn’t allow the developer to listen to ALL changes in the DOM, wherever the change came from.
You say Yahoo UI allows to simulate this, which, in my perspective, is misleading. I would have at least expected some kind of wrappers around DOM’s appendNode and insertBefore functions that would fire the DOMNodeInserted event.
[…] 15 Things you can do with Yahoo! UI […]
carter country gun stafford…
SomegifttoME 138402 carter country gun stafford co…
Yahoo YUI sure is really nice, but I think it’s getting a good hype that may be making people think it’s the only thing out there or it is what javascript should be. “GetElementsBy” is nothing new obviously YUI didn’t invent it, it’s nice that they include it - but it’s already very easy to use. The other thing you have to pay attention to is that not all browsers support all the GetElementsBy methods…Anyway that was one point I wanted to make in reference to this post.
The other thing I wanted to say was don’t forget about jQuery, Mootools, Rico, Scriptaculous, Dojo, etc. They are also some very very nice libraries. In fact, jQuery has an outstanding community and for every 15 things you can find to do with YUI, I could probably find 50 for jQuery. Not to insult any library here, my point is you simply have to use the right one for the task at hand and minimize load times and production times.
Speed is the key to these libraries and YUI is just another tool that any web developer should keep in their toolbox. Good article here.
Tom. Good feedback. Highly doubt the 15 to 50 ratio - as I would argue directly opposite. You could build jQuery with YUI, but not the other way around. jQuery is too high level, and that is its appeal to regular web developers. YUI is low level in the sense that you really can make it do anything you want.
Very nice article about YUI, I used some of those elements (calendar, reset, etc) before, but this is a nice listing for inspiration!
Nice article! … and nice demos! Really cool. Congrats!
More cool stuff with YUI: http://www.extjs.com
[…] Vitamin Features » 15 Things you can do with Yahoo! UI (tags: yui tutorial javascript webdev howto) […]
nice info….yea i like YUI
Dustin,
This more or less does the trick.
case ‘thumbsNext’:
var o = document.getElementById(’thumbs’);
var f = o.getElementsByTagName(’img’);
w = 0;
for (i = 0; f.length > i; i++) {
w += f[i].width;
}
var result = Math.ceil(w/400);
if ( x === result ) {
return;
}
Really nice info
Nice stuff!
Is there a demo somewhere that takes the “Pagination Slide Pattern” and applies the scrolling technique of iPhone? viz., click on the content area and drag it either way instead of relying on the arrow keys on each end for scrolling…
[…] 1. Top 10 Reasons Why Movie Downloads Suck 2. 12 Ways that Transform Shyness 3. 32 Things You Can Do with Beer 4. Top 5 Top Five Reasons Not to Buy a Horse at an Auction 5. 10 tips to secure client VPNs 6. 10 Things You Always Wanted To Know About Data-Driven Decision Making 7. 55 Ways To Make Your USB Drive into a Digital Swiss Army Knife 8. 5 Tips to Start a Nonprofit Blog 9. 7 ways to become a Virtual Extrovert 10. Top 5 Reasons why you want others to succeed 11. Fourteen Ways To Avoid Plant Poisoning 12. The Top 10 Reasons Employees Are Fired In Toronto 13. 9 essential things everyone should know about email 14. 10 Things You Can Do to Prevent A Thyroid Condition 15. Top 3 reasons to use clean URLs 16. Top Five Reasons to Visit Andorra 17. Top Ten Reasons People Exercise: 18. 15 Ways to become a Digg Power user in only 48 hours 19. 12 Things Everyone Ought to Know About The LIFO® Method 20. Top 10 Reasons People Unsubscribe 21. Top 5 Most Effective Tips to Avoid Getting Spam Altogether 22. Three Things you Can Do to Cut your Monthly Bill 23. 5 Ways To Become An Inspiration To Others 24. 10 things you should never buy used 25. Top 10 Reasons Why You Should See Hot Fuzz 26. iPhone - 3 Features That Will Impact Education 27. Top 10 Reasons to Relaunch IGN Dreamcast 28. How to stifle your creativity in 10 easy steps 29. 5 Things Everyone Who Wants To Work From Home Needs To Know. 30. Four ways to become known as an ‘expert’ on your book’s topic 31. 7 tips to extend your battery life 32. TOP 10 Home Maintenance & Repair WEB SITES 33. The Guardian’s "100 Best Books of All Time" 34. 5 Sure-Fire Social Media Headline Formulas That Work 35. 10 Cool Things you can do with Clicktracks 36. Seven Things Everyone Should Know About Planning a Funeral 37. 7 Sure-Fire Ways To Lose Friends And Get Your Story Buried On Digg 38. Crabby’s 10 ways to get the help and support you need 39. Ten Must Read Books about Mathematics 40. 10 TOP REASONS TO DATE A SOCIAL SCIENTIST 41. Top Five Reasons You Should Not Buy a Mr. Coffee Espresso Machine 42. Top Ten Reasons To Blog and Top Ten Not to Blog 43. Top 10 reasons for programming in Python 44. Top Ten Reasons to Oppose the Free Trade Area of the Americas 45. Eight Cheap Ways to Become Famous without Killing Anyone 46. Top 5 Reasons to own a Pet 47. Top 10 Things Americans Want but Can’t Have 48. The Top 5 Reasons to succeed and why it sucks to be a Loser 49. Top 15 Ways to Extend Your Laptop’s Battery Life 50. Top Ten Reasons to Switch to Firefox 51. Dating Basics: 8 Surefire Tips to Make it Successful 52. 25 Things You Can Re-Use At Home 53. Seven Simple Steps to Raising Credit Scores 54. Top Ten Reasons To Buy Flood Insurance Now 55. Six Tips to Stay Awake on Road Trips 56. Top 10 Reasons as to why I still need to be convinced about marketing on Second Life 57. Top 10 Tips to a Great Web Page 58. 7 Ways To Become An Authority Site In Your Niche! 59. Top 10 Reasons to Hire Me for the Internship 60. 10 Ways to make yourself a YouTube Star 61. The Top 10 Reasons Why Newspapers Are Sinking Online 62. 5 Sure-Fire Tips for Using Keywords on Your Blog 63. Top 5 Reasons Cyclists Shave Their Legs 64. Top Ten Reasons to Use GnuCash 65. Top Ten ways to get thrown out of chemistry lab 66. The Top 14 Indications an Astronaut Is Drunk 67. Top 10 Reasons It’s Almost Impossible to Compete with Google 68. 11 Things You Can Bet On (Legally) 69. 40+ Tips to Improve your Grammar and Punctuation 70. 8 Simple Steps to Make a Page More "Local" 71. Five Things I Can’t Stand In Opera Mini 72. Ten things everyone should know about philosophy 73. Top 9 Reasons NOT to Declaw a Cat 74. Top Ten Things to Think About If You Want to Change the World 75. Defensive Driving, 70 rules to live by 76. The Top 15 Signs American Students are Lacking Math and Science Skills 77. Mindmapping in 8 Easy Steps 78. Top 10 Reasons For Opposing Food Irradiation 79. 10 Things you Can’t do with the Law of Attraction 80. Visual Tour: 20 Things You Won’t Like About Windows Vista 81. 3 Title Tag Tips That Can Increase Your Ranking 82. Five Things You Didn’t Know You Could Do with PHP 83. Ten things everyone should know about the Labour Party 84. 10 Quick Tips for Hotel, Motel Safety 85. 10 Myths About Self-Employment, 10 Reasons You Should Never Get a Job 86. 9 Expert CSS Ideas You Should Think Twice About Before Using 87. Top Ten Reasons Traders Lose Their Discipline 88. Top 20 Reasons MBAs Are Overrated 89. Top 5: Men must read this. 90. 10 rules to manage your boss 91. Ten Things Everyone Ought To Know About Global Warming 92. 10 Reasons Why You Should Date a Fat Girl 93. oceangopher’s "1001 things to do before you die" 94. 30 Tools and Tips to Make your Skype Better (All Free!) 95. 3 rules to protect your iPhone from a serious Safari security problem 96. The 10 Best Ways to Help Your Kindergartener Succeed in School 97. The Top 3 Reasons To Buy Classic Auto Parts Online 98. The 5 Stages of Online Dating 99. Top 10 Reasons Why Tom Keating Loves Asterisk 100. Ten Things You Can Do Today to Jump-start Success 101. 33 Tips to Become a Well Liked Person 102. 45 things we can do to save the enviornment 103. Wikipedia:10 things you did not know about Wikipedia 104. 15 tips to choose a good text type 105. he Top Seven Reasons Most Job Seekers Are Best Served Applying for Jobs on Employer Career Pages and Not Through Large Commercial Job Boards or Recruiters 106. Top Ten Fake Reasons Given for Waiting In Line for Hours to Buy an iPhone 107. 20 Tips to Help Prevent Medical Errors 108. 7 Things You Should Know about Podcasting 109. 6 Simple Steps for a Search Engine Optimization Strategy 110. 10 Features that Help Make You a Better Blogger and Publisher 111. Fourteen ways to evaluate your landing pages 112. Top Ten Reasons for Everything 113. Top 5 Myths About America 114. 7 Key Tips For A Fish Friendly Farm 115. How to Save Money on Gas - 29 Tips 116. Top Ten Nine Reasons the Apple Dock Still Sucks 117. Shopping 101: 15 Must-read Gown Shopping Tips 118. 11 Cool Things You Can Do With PHP 119. 26 Things You Can Do With Your Cell Phone 120. The Top Ten Reasons to Get Into Micromounting 121. Top 10 Mistakes Men Make While Dating Russian Women 122. Top 10 Tips For Starting A Business That Will Succeed 123. 19 ways to become the ONE person at the conference everyone remembers 124. Top 10 Reasons to Start Walking 125. Five Things You Can Do to Improve Your Marriage 126. Christian Convert: 10 Things Everyone Needs to Know About Islam 127. 6 Ways to Speed Up Your Site 128. Top 10 Things You Can Do During A Blogout 129. The Top 60 Web 2.0 Applications in Australia 130. Top 10 Revenue Models for Free To Play Games 131. 8 Sure-fire Tips For Enticing Readers In Your Mortgage Marketing Letters 132. Top 100 Shows of All Time 133. Debate - .NET V. PHP: Top 6 Reasons to Use .NET 134. 16 Must Read Articles For Bloggers 135. Top 25 Personal Finance Myths 136. 5 tips for writing timeless content 137. 50 Web Usability Tips that Help You Attract and Retain Visitors to Your Website 138. Fifty Things You Can Do With RSS 139. 10 things you should know about connecting Macintosh OS X systems to Windows networks 140. 7 More Sure-Fire Headline Templates That Work 141. Top 10 Reasons to Work at Google 142. 8 Tips to Optimize Adsense Units 143. 83 Things You Can Do With a Penny 144. Top Ten Reasons Ethical Culture Might Be Right for You 145. Top Five Reasons Why This Ball State Story Is Cool 146. 10 Ways To Become More Efficient 147. Seven tips for making yourself happier IN THE NEXT HOUR. 148. Top 5 Reasons Why Bodybuilders Fail to Achieve Bodybuilding Gains 149. 10 ways you can reduce your carbon emissions and help cool the planet 150. Top 10 Reasons to Try Yoga 151. Fourteen Surefire Ways to Getting Yourself Fired 152. 13 Things You Can Make Out of Old Blue Jeans. 153. Dr. Shawn’s 10 Easy Steps to Science Fair Success 154. Top 10 Reasons Why a Bird Could Be the Best Choice for Your Family 155. The top ten things food companies don’t want you to know 156. 10 Effective Ways to Get More Blog Subscribers 157. 13 Simple Steps of Picture Editing for Amazing Results 158. 7 Tips For Understanding Guy’s Body Language For Singles Dating 159. 100 Things you Can do Right Now To Make Your Web Site Better 160. 41 Simple Tips to Help You Get to Sleep 161. 10 Reasons why PHP is still very much alive 162. Top Five Reasons Your Skin Needs You to Stop Smoking Now 163. Your First Year of College: 25 Tips to Help You Survive and Thrive Your Freshman Year and Beyond 164. Top 10 Things You Can Do to Keep Guantanamo Open 165. 8 Quick Tips to Choosing a Domain Name 166. Top-Ten Reasons to Get Out of Iraq. Now! 167. 5 Big Secrets They Don’t Want You to Know About Investing 168. The Top 5 Jason-Bourne-Improvised Weapons 169. Three Things Educators Can Do 170. 10 Things You Should Do Before Going to Heaven 171. Top 10 Reasons to Major in Computing 172. 10 Essential Tips to Ensure Your Press Release Makes the News. 173. Top 11 Myths about the Internet (and USENET too) 174. 10 Marketing Tactics Under $10 175. 20 Firefox Extensions That Will Save You Money 176. Memo to the Studios: Ten Easy Ways to Improve High-Def Discs 177. Feeding Yourself In Six Simple Steps 178. 4 Things Bill Gates Knows That You Don’t 179. Top 10 Body Hacks 180. Top 6 Reasons Harry Potter Isn’t For Kids 181. 13 Must-Read Destination Wedding Tips 182. Five Things to Check Every Time You Ride 183. Desktop Tower of Money: 3 tips to profit from casual games 184. Top 13 reasons to use a web framework and never look back 185. Ten Things Everyone Should Know About Inflation 186. Top 26 Engineers’ Terminologies 187. Top 10 reasons Slick Willie should be Hillary’s running mate 188. Tomcat 5.5 with Apache 2.0 Integration in 5 Simple Steps 189. The top 11 reasons to use Google Apps 190. The Top 15 Way Cool Reasons To Spend a Day or a Weekend at a Nudist Campground/Beach 191. 20 Things You Didn’t Know About Pencils 192. 101 Art Ideas You can Do Yourself 193. 10 Things Everyone Should Know about Nintendo Wi-Fi Connection 194. 10 Really Bad Rock Band Break-up Puns 195. 7 simple steps to grow your fortune 196. Fifty Ways to Take Notes 197. 10 Simple Steps To Becoming Wealthy 198. Top Must Read Books about Money and Finances 199. 99 Ways to Become a Better Leader 200. 100 best things to see in Edinburgh 201. 4 Common Ways to Remember Material 202. 10 Things You Shouldn’t Do When You’re Buying a Home 203. 50 Things You Need to Know by 50 204. Top Ten Reasons to Ban Guns! 205. Climate Change: 25 Things You Can Do 206. 101 Things You Can Do to Stop A War 207. Top Ten Myths About Evolution 208. Top 10 Reasons for Marriage Equality 209. 4 Things We can learn from the google story 210. Top 10 Reasons to Hate Alec Baldwin 211. Top 10 Reasons Why They Don’t Like You at Work 212. 10 simple steps for securing your Mac 213. 5 Fool-proof Ways to Become the Boss You’ve Always Hated 214. Twelve Simple Steps to Protect Your Identity Online 215. 10 REASONS WHY ASTRONOMY IS BETTER THAN SEX 216. Professional Blogging: Ten Tips To Become A Successful Online Independent Publisher 217. Top 10 Reasons You Don’t Exercise 218. Five Ways to Remember Your Pet 219. Top 10 Ways to Destroy Earth 220. Top Ten Reasons to Quit Your Job 221. The Top Five Reasons to Choose J2EE as Your Application Server Platform 222. Ten Reasons Why You Should Not Buy Breast Implants 223. Top 10 Australian Food/Wine Experiences 224. 160 books on must-read list for boys full of blood, guts and class heroes 225. TOP 10 HOME THEATER WEB SITES 226. 10 Things We Can Learn From Apple 227. Why Bike? Top Five Reasons to Ride 228. Ten Things Everyone Should Know about Ordering an Inkjet Cartridge Online 229. Top 5 PDA mobiles in stores. 230. 20 Things You Didn’t Know About Galileo 231. 7 Surefire Tips to Make Your Order Page Work Harder 232. 10 Things You Can Do To Promote Peace in Iraq in 2007 233. 27 Features That Make Google Analytics Best of Breed 234. Six ways to become known as an “Expert” 235. Top 10 Ways to Become a Miserable Blogger 236. 88 Surefire Tips for Succeeding in College 237. Top Ten Reasons to Implement a CMDB 238. Eight Simple Rules for Becoming a Great Recruiter 239. 8 Tips To Boost Your Energy Level 240. 10 things you can do when Windows XP won’t boot 241. The 45 Best Things About Turning 45. 242. 14 ways to become slim (Part 2) 243. 25 Rules to Grow Rich By 244. Top 5 Blogging Myths 245. Top 10 Best Places to Get Free Books 246. top ten list of reasons why you might want to use Silverlight: 247. 3 PHP Tips For Product Developers 248. Four Simple Steps to More Blog Subscribers 249. Twelve Simple Things You Can Do to Protect Your Well Water 250. 13 things that do not make sense 251. 51 Things You Can Do For The Environment 252. Top 5 Reasons to Visit the Dentist 253. Top 10 Songs Stick in Everyone’s Head 254. 9 easy things to do for successful conception! 255. 37 Lessons to Help You Live a Life that Matters 256. 50 "Greatest" Things You’ve Never Done 257. 11 things you may not know about Star Wars 258. Top 10 reasons why Hack Day rocks 259. 101 THINGS YOU CAN DO THE FIRST THREE WEEKS OF CLASS 260. 14 Things You Can Learn at a Wedding 261. The Top (and Bottom) 10 Reasons Men and Women Have Sex 262. 7 Helpful Tips To Immediately Increase Your Confidence 263. 5 Leopard GUI Gripes 264. 55 Things You Can Learn About a Guy in 10 Minutes 265. 101 Things you do NOT want your System Administrator to say. 266. Fourteen Ways To Double Your Productivity 267. Top 10 Must See Destinations in China 268. 11 ways of staying focused 269. The Top Ten Reasons Visitors Leave Your Site 270. 7 Things You Can’t Say in Canada 271. 9 tips to avoid suspicious Web sites 272. 10 Things You Can Do To Boost Sales Now 273. Great Bootstrapping Secrets: 45 Ideas that Can Save Your Business Money 274. 10 things you MUST know before you register a domain name with anyone 275. Twenty Two Must-Do Blogging Tips from Must-Read Blogging Experts 276. 10 things you should be monitoring 277. Top 10 tips for choosing a business domain name 278. How to Ace Your Job Interview: 88 Surefire Tips and Tricks 279. 100 Keyboard shortcuts (Windows) 280. The 25 Worst Tech Products of All Time 281. Top 10 Reasons Why Small Businesses Fail 282. Ten Real Reasons Why MGS4 Is PS3 Only 283. 20 Tips to Minimize Shopping Cart Abandonment 284. Hypnosis - 4 Powerful tips you can apply today to explore focus and concentration 285. 50 ways to become a better designer 286. Top 10 Reasons Wall Street Gives for the Stock Market Correction 287. Top Reasons For Riding Metro 288. 7 Secrets of the Super Organized 289. The 5 Secrets PPC Agencies Don’t Want You To Know 290. Top 10 Reasons Why Proposals Fail 291. 25 Fun and Easy Things Kids Can Do 292. 4 easy steps to getting your videos online 293. Top 10 things everyone must know about computer viruses 294. 101 Easy Ways to use Google Website Optimizer 295. 101+ Practical Ideas You Can Use to Improve Your Library Program 296. 15 Hacks To Enhance Google Reader 297. FIVE THINGS EVERYONE SHOULD KNOW ABOUT DIABETES 298. The 7 best reasons to write a business plan 299. From Free to Fee in 10 Easy Steps 300. Top Five Reasons to Freelance 301. 10 ways to boost your feel-good factor 302. op 10 Reasons to Impeach Bush and Cheney 303. 10 Essential Business Leadership Skills 304. 4 Easy Steps to Making Old-Fashioned Lenticular Images from Your Photos 305. 50 Ways to Better Your Design Skills 306. Ten Ways Being a Geek Makes You More Attractive 307. Ten Sure-Fire Tips for Avoiding Plaque 308. 4 Simple Steps to Coloring your WWWorld! 309. 10 Things Everyone Should Know About Their Web Business (Especially Hosting) 310. Top ten reasons to date a member of the GVG: 311. The 213 Things Skippy Is No Longer Allowed To Do In The U.S. Army 312. Top 10 ‘Global-Warming’ Myths 313. Web Accessibility: 10 Things You Can Do To Help 314. Top 10 Myths about Adobe Flex 2.0 315. FOURTEEN THINGS YOU CAN DO RIGHT NOW TO INCORPORATE MULTIPLE INTELLIGENCS INTO YOUR DAILY TEACHING 316. 8 Simple Steps to Build Traffic For Your Internet Startup 317. Top Eleven Reasons You Shouldn’t Forward Me That Email 318. 7 Easy Ways To Lose Weight 319. Five Things To Do With A PC When You Have No Internet Connection 320. 7 Idea Dumping Tips (How To Manage Diarrhea of the Brain) 321. 101 Blog Tips I learned in 2006 322. Top 10 Reasons for Reading a News Site 323. Ten ways to become a better dad 324. TEN TOP REASONS TO DATE AN ENGINEER 325. Ten things you can do with virtualization 326. 10 Easy things to do to keep your computer running like a race horse…Computer Spring Cleaning! 327. Top 50 things you should never do at a wedding 328. Ten things you can do to help curb global warming 329. 10 Creative Ways to Remember to Take Your Thyroid Pill 330. School is in: 7 computer security tips for students 331. Top Ten Reasons To Give Up Blogging 332. 25 THINGS YOU CAN DO TO SAVE CORAL REEFS 333. 5 Sure-Fire Tips for Great Speeches 334. The Top 3 Reasons to Colonize Space 335. 5 Blog Writing Tips To Get More Comments 336. News - 4 Easy Steps to Kill Blog Spam Forever 337. 10 things you can do to save the planet 338. 10 things you can do for the ocean 339. Top 10 Safest Cities in America 340. Six Tips for Buying an MP3 Player with Flash Memory 341. 10 Ways To Increase Your Chances Of Hearing Someone Say "You’re Hired" 342. Publishing secrets: Ten ways to become the next JK Rowling 343. Five Simple Steps To Lose 10 Pounds 344. Top Ten Reasons to Create a Classroom Web Page 345. The Top 10 Reasons Why You Should Not Buy Disability Insurance 346. Top 10 Most Bizarre and Politically Correct College Courses 347. 6 simple steps to becoming a top IT consultant 348. 30 Things You Can Do to Change the World in 30 Seconds 349. The top 5 reasons RSS is so great 350. Top 10 reasons to love Internet Explorer 351. Top 10 Places to Find Free Images For Your Blogs 352. Top ten reasons why e is inferior to pi 353. Top 5 features that browsers need 354. Become a security guru in five simple steps 355. Top 10 Reasons Why Suge Killed 2Pac 356. 10 things you should do to protect your network against wireless devices 357. Ten things Britons should not do when visiting the US 358. Ten things you didn’t know about open source 359. Top 20 books you must read before you die* 360. 10 Greatest Things About Rocky 361. Top Ten Reasons to Study Geography 362. 12 Easy Things You Can Do to Help the Homeless 363. 20 Things You Didn’t Know About Mosquitoes 364. Sex, Eating And Sleeping. Three Things That Can Trigger A Heart Attack 365. Top 10* Reasons to Celebrate Groundhog Day 366. Top 5 Black Hat Hackers of all time 367. Top 5 Must-Read Photography Blogs 368. 20 Things You Didn’t Know About Nothing 369. Top 10 Reasons to Visit Canada 370. 10 reasons why you should travel Maldives: String of Islands 371. Top 5 Hottest Product Launches of 2007 372. Fourteen Ways to Write Winning Email 373. Top 5 New Year wishes of an intranet consultant 374. 20 TRAVEL TIPS THAT CAN GET YOU THE BEST DEALS AND SERVICE 375. Top Five Reasons to Collect Sports Cards 376. 5 Things Everyone Should Know about George Washington 377. 100 ways to become German 378. Top Ten Reasons to Outsource 379. 6 Personal Finance Tips That Can Improve Your Life 380. Top Ten Reasons You Should Fear the Transit Searches in New York City 381. 5 Sure-Fire Tips To Save You $1000’s On Your Home Gym 382. Ten Reasons Why You Should Not Buy an Irock 383. Ten Things Everyone Should Know About JFK 384. 10 Titles for a Christian Blogging Book 385. Top Ten Reasons To Give Blood 386. Top Ten Reasons Why ERP Projects Succeed 387. 10 Simple Steps To Directly Monetizing Blogs 388. 5 Habits Of Best Software Developers 389. 11 RULES OF WRITING 390. 82 Blog Tips I learned in 2007 - a must read! 391. 5 Reasons You Should Be Bidding On Your Company Name 392. TEN THINGS YOU SHOULD DO IF YOU ENCOUNTER A UFO 393. Top 10 destinations for spotting a celebrity 394. 10 Sure Fire Tips for Choosing The Right SEO Company 395. 16 Tips to Triple Your Workout Effectiveness 396. 25 Gadgets That Actually Save Money 397. Top 10 New Year’s Resolutions 398. 10 Things You Can Do to Prevent Violence in Your School Community 399. 10 Reasons Why Pirates 3 Actually Kicked Ass 400. 6 ways to become a human calculator! 401. 7 Tips on Pitching Blog