Mar 11

In part I, we saw how the getLocation/setLocation simplifies getting or setting the position of an HTML element on a page. In this post, I”ll talk about several methods which help you getting the size of a specific object. I”ll start with getContentSize. This method will return an object which gives you the width and height occupied by the contents of an HTML element. Note that this does not include the borders of the element. As you may be expecting, the content size will depend directly on the type of element, its content and on the setting of the width and height CSS styles.

If you want to get the “full dimensions” of the element (ie, you want to include its border and  padding – still no margins here!), then you can call the getSize method. On the other hand, you might only be interested in getting the bounds of the element. In this case, you”ll receive an object with the top-left coords of its top-left corner and its width and height (yep, it”s the same as calling getLocation and getBounds). Since I”m talking about bounds, there”s also another method which you might find usefull: getClientBounds. It will give you the width and height of the browser window (the cool think about this method is that it”ll work with several browsers!)

The getBorderBox method receives an element and returns a peculiar object. It”ll let you access the width of the top (top property), left (left),bottom (bottom) and right (right) borders. Note that this property returns the width without the unit. Besides those four properties,you can still access the horizontal and vertical properties: these let you get the total width occupied by the border on the horizontal (sum of left and right) and vertical (sum of top and border). Similarly, there”s a getPaddingBox method which returns the an object with info regarding padding.

There are other utility methods, like isBorderVisible (which indicates if the current border is visible or not), getMargin (which calculates the width of a specific margin), getBorderWidth (which returns the width of a specific border) and getPadding (returns padding associated with an element). The _CommonToolkitScripts class can also help you when you need to parse a unit (through it”s parsePadding and parseUnit methods).

Lets end this post with a simple example:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>
<html xmlns=”” >
    <title>Untitled Page</title>
    <script type=”text/javascript” src=”MicrosoftAjax.debug.js”>
    <style type=”text/css”>
         #test {
          border: solid 2px red;
          margin: 2px;
          width: 200px;
          height: 100px;
          padding: 2px;
   <script type=”text/javascript” src=”common.js”>
   <div id=”test”>
       Another simple test
   <div id=”info”>
<script type=”text/javascript”>
function getInfo(){
  var contentSize = $common.getContentSize( $get(“test”) );
  var size = $common.getSize( $get(“test”) );
  var bounds = $common.getBounds( $get(“test”) );
  var marginBox = $common.getMarginBox( $get(“test”) );
  var borderBox = $common.getBorderBox( $get(“test”) );
  var paddingBox = $common.getPaddingBox( $get(“test”) );

  $get(“info”).innerHTML = [
       “content: ” + contentSize.width + “:” + contentSize.height,
       “size:” + size.width + “:” + size.height,
       “bounds: ” + bounds.x + “:” + bounds.y + “:” + bounds.width + “:” + bounds.height,
       “margin box: ” + + “:” + marginBox.left + “:” + marginBox.bottom + “:” + marginBox.right,
       “border box: ” + + “:” + borderBox.left + “:” + borderBox.bottom + “:” + borderBox.right + “:” + borderBox.horizontal + “:” + borderBox.vertical,
      “padding box:” + + “:” + paddingBox.left + “:” + paddingBox.bottom + “:” + paddingBox.right + “:” +   paddingBox.horizontal + “:” + paddingBox.vertical
       ].join( “<br />” );

As you can see if you run this example, those methods are really cool and they will really help you when you need to get info about HTML elements (and remember: they work with several browsers too!).

Now, before you run the previous page, and come back adding some comments on how it doesn”t work, you  must take into account that the Toolkit suffers from a “use it from ASP.NET pages only” disease. What? yep, like the AJAX ASP.NET, it also uses resources for customizing the error messages of the client class. Unfortunately, and unlike the AJAX ASP.NET client library, there”s no download for js client files that introduce those global error variables (at least, i didn”t find it; please tell me I”m wrong!!!). So, if you want to use only the client portion of the toolkit, you”ll have to build those classes and its members or you”ll have to go through the code and change it so that it doesn”t use those objects.

If you know me, you already know that this thing (using resources for localized error messages) doesn”t make me happy…

2 comments so far

  1. airline tickets
    4:22 pm - 5-14-2007

    Hi. Great site.