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]

One of the lesser known gems of the Yahoo User Interface library is the Region utility which is part of the Dom utility. The documentation only mentions it and what it gives you but doesn’t quite live up to how powerful it can be in day to day interface development.

Please refer to the accompanying demo page about YUI Region to see the examples in this post in action.

Retrieving an element’s region

The Region utility returns you the region occupied by a certain element in the browser. You use it by sending the ID, a reference to an element or an array of elements to the getRegion() method:

var region = YAHOO.util.Dom.getRegion('reg1');

The method returns an object with several properties and some methods. The properties are:

top

the amount of pixels between the top side of the element and the top left of the window.

bottom

the amount of pixels between the bottom side of the element and the top left of the window.

right

the amount of pixels between the right side of the element and the top left of the window.

left

the amount of pixels between the left side of the element and the top left of the window.

0,1

Shortcuts for the left and top property (added for compatibility with YAHOO.util.Dom.setXY()

The really cool thing about Region is that it gives you that information regardless of the positioning of the element (static,relative,absolute,fixed). A possible result would be:

Region {top: 109, right: 571, bottom: 177, left: 371};

Check the “Get occupied space of #1” link on the demo page to try it out.

Determining element overlap

Furthermore the object has several methods:

getArea()

returns the total amount of pixels occupied by the region.

contains()

returns a Boolean if a region fully contains another region

union()

returns the union region of two regions, which is the screen estate containing both of them

intersect()

returns the region that two regions have in common

The contains() method is pretty useful as it can tell you when and if an element is visually inside the other one. This can help immensely for drag and drop interfaces. You use it by defining the two regions and it returns a Boolean.

reg1 = YAHOO.util.Dom.getRegion('reg1');
reg2 = YAHOO.util.Dom.getRegion('reg2');
var contains = reg1.contains(reg2);

If the element with the id reg2 is visually completely inside the element with the id reg1 contains will be true, otherwise it is false.
You can try this out by clicking the “Is #2 fully inside #1?” link on the demo page to this post. Also resize the element with the “Resize#2” to see the change when you click the test link again and reset the element with “Undo Resize #2”.

The union() method returns the screen region that encompasses both the elements. This is very useful if you want to cover both regardless of their positioning.

reg1 = YAHOO.util.Dom.getRegion('reg1');
reg2 = YAHOO.util.Dom.getRegion('reg2');
var contains = reg1.union(reg2);

The result is another region object.

The intersect() method returns the screen region that is covered by both the elements. This is very useful to determine to what percentage two elements overlap or highlight the overlapping section.

reg1 = YAHOO.util.Dom.getRegion('reg1');
reg2 = YAHOO.util.Dom.getRegion('reg2');
var contains = reg1.intersect(reg2);

The result is another region object.

You can test both methods by clicking the “Show section containing both” and “Show section occupied by both” links on the accompanying demo page about YUI Region.

Calculating element dimensions

You can use the region information for a lot of different things. Probably one of the most useful is to get the width and height of the element in a reliable fashion. All you need to do to calculate them is to substract left from right for the width and top from bottom for the height:

var region = YAHOO.util.Dom.getRegion('reg1');
var elmHeight = region.bottom - region.top;
var elmWidth = region.right - region.left;

Check the “Get dimensions of #2” link on the demo page to try it out.

You can use this to for example read out the size of form elements and fix tooltips to their correct size. Say you have a DIV with the ID reg2 and a select box with the ID selectbox. The following script would position the DIV under and make it as wide as the selectbox.

var sel = YAHOO.util.Dom.get('selectbox');
var elm = YAHOO.util.Dom.get('reg2');
var size = YAHOO.util.Dom.getRegion(sel);
YAHOO.util.Dom.setXY(elm,[size.left,size.bottom]);
YAHOO.util.Dom.setStyle(elm,'width',(size.right-size.left-20)+'px');

You can try this out by clicking the “Resize #2 to the size of the select” link on the demo page to this post.

Notice the -20 in the last line, this is a fix as the element has a padding of 10 pixels. This is neccesary as you cannot easily and reliably read out the padding of the element automatically unless you also set it with JavaScript.

This is just a teaser on what you can use Region for. Widgets like the YUI menu or container use it constantly to determine if certain functionality can be displayed or not.

[tags]YUI,dom,manipulation,positioning,css,formelements,interface,fixing,webdevtrick[/tags]