Monitoring element size and position with the YUI

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.