Dirk Jesse has read my blog post on how to enhance the YUI grids with equal height columns adding a dash of JavaScript and wanted to get him some of that for his own CSS framework YAML.

Together with Dirk Ginader he created a jQuery based plugin for the YAML framework to equalize columns.

There is not much being said outside of Germany about YAML, and, me being out of the loop just got aware of it recently, too, but I must say that if you are looking for a well-documented CSS framework and the YUI grids do not to cover what you try to achieve, YAML is worth a closer look. It is amazingly well documented in German and the maintainers put a lot of effort into creating the English version of YAML for the rest of the world to understand more easily.

Probably the biggest boost you can give any CSS framework is take the initial pain of creating the HTML with the correct classes and IDs away by creating a WYSIWYG editor and the YAML folks have done this with the YAML builder also based on jQuery.

YAML is a product worth keeping your eye on as the maintainers are eager to extend and maintain it and take on interesting feedback to add improvements to the next release. It is furthermore quite lucky that the product is targeted to a much different audience than hardcore developers as the clash with the straightforward machine parsable data serialization format with the same name could be confusing.

[tags]CSS,frameworks,equalcolumns,jquery,dirkjesse,dirkginader,yaml[/tags]

In November, I’ll be back on the Eurostar to Travel to lovely lovely Paris and once again be the single English speaking presenter at a French conference. Past encounters were the first Braillenet Conference and the 11th BarCamp Paris.

My talks will be a piece on why web standards make sense for collaboration and parallel development in distributed teams and a quick workshop on Unobtrusive JavaScript.

If you are in Paris, and you know people who still need to hear about that sort of stuff (I know there are a lot out there although we claim we won that argument) have a peek at the Paris Web Conference Web Site and I’ll see you on 14th-16th of November in that beautiful city by the Seine.

[tags]webstandards,paris,conference,parisweb,parisweb2007[/tags]

One of my favourite tricks in scripting is to delay things until they are absolutely necessary to make sure that no user needs to deal with lot of code that doesn’t make sense to have at that point in time. This leads to faster pages and just makes sense. The most common trick for this is to add JavaScript library files using dynamically created script tags. I have already written about this in 2005 on this blog and it still is a cool thing to do.

The only problem I am seeing with this is that you never know when the other script has been loaded and it is safe to access the methods and variables in it. There are several ways to have a “loading ready” indicator but the browser differences are annoying : Jan Wolter has written about this in large detail.

The safest option is to write your scripts that get loaded dynamically to do a function call or amend an object once they are executed. However, sometimes you want to call library code that is not yours. Some APIs like the flickr or del.icio.us ones work around that by offering a callback parameter or wrap the returned dataset in a function. Not all third party code does that though.

One sensible solution for dynamic inclusion is YUI if you don’t want to have all the widgets you need later on loaded when they are not yet needed. The Rolls Royce solution for that is using the YUI Loader which even allows you to load non-YUI content on the fly. If you don’t want to go that far you can however have a poor man’s version of loader by observing the loading of components with YUI_config.

In order to do this you simply define a YAHOO_config object and point its listener property to your monitoring function. This has to happen BEFORE you insert the YUI YAHOO object!

The info parameter gets sent every time a new component of the YUI is loaded and ready to go. It is an object with several useful properties, the most useful ones being version and name of the YUI component. That way you can write different listener functions that get triggered when a certain component is available using the component names available on the YUI loader page. For example to only include animation on the fly and call an animation method once it is loaded you can use:

This is a very easy way to make sure you can use YUI components before you try to access them.

[tags]YUI,dynamicloading,deferredloading,performance,libraries,inclusion,javascript,webdevtrick,scripttag[/tags]

I just came back from giving a presentation on how to cater content distribution via badges and widgets to the right audience and how we fail at it.

See it on slideshare.net:

[tags]distribution,badges,widgets,blogging,facebook,bloggers,ugc[/tags]

One of the biggest issues of CSS layouts is that not all columns are the same height which makes it hard to style them in a traditional manner. You can embrace this change as a designer, but that seldomly happens.

Having played with YUI grids lately I realized this shortcoming, too. Nested grids don’t have the same height. I am sure you can tweak the CSS to do that (Ed Eliot showed a lot of options how to achieve equal height columns in the past) but I don’t get much fun out of CSS hacking.

What I like is JavaScript and as equal column heights are not really a vital part of a web site functionality, I am happy to use it to fix these issues.

As the YUI grids come with a defined set of CSS classes I have my hooks to apply JS functionality to and the script was easy to do using YUI Dom and YUI Dom Region.

Check out the demo page for equal height nested grids and download the script to use it in your own grid solutions.

All you need to do is to add YAHOO, YAHOO Dom and YAHOO Event (easiest with the collated yahoo-dom-event package) and the script in the bottom of your document’s body. The script automatically equals all columns in nested grids. If you don’t want all of them to be equal, define only those that need fixing by adding a “columnfix”CSS class.

[tags]CSS,grids,grid layout,YUI,equal columns,layout,fix,bug,webdevtrick[/tags]