Mar 11

The _CommonToolkitScripts client class is defined on the common.js file and contains several helpers which perform several important operations that might come handy when you need to write client components that shoudl work in several browsers. The common.js file also creates a new object of this type ($common) so that you don”t need to instantiate a component when you need to use the methods exposed by the class. Let”s see what we can do with this class…

let”s start with something interesting: positioning! Not sure about you, but to me, position is one of those things i never get right at first. Well, I know the basics, but when you start adding iframes, relative and absolute positions, everything gets in a huge mess rather quickly. The AJAX client framework already introduced 2 cool methods which let you get or set the correct position of an HTML element: getLocation/setLocation static methods exposed by the Sys.UI.DomElement helper class. The _CommonToolkit Scripts class extends the getLocation method with aditional code that makes sure you”re getting the correct positioning in IE 6 for some specific cases. Note that this method will return a point relative to the the top-left corner of the window and you”ll get the current scrolling taken into account. For instance, if you have the following page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>
<html xmlns=”” >
      <title>Untitled Page</title>
      <style type=”text/css”>
          #demo {
              position: relative;
              top: 20px;
              left: 30px;
              border: solid 1px red;
               height: 100px;
               position: absolute;
               top: 10px;
               left: 10px;
               border: solid 1px blue;
            position: absolute;
            top: 10px;
            left: 10px;
             position: absolute;
             top: 300px;
             left: 0px;
     <script type=”text/javascript” src=”MicrosoftAjax.debug.js”></script> 
        <div id=”top”>
               <div id=”parent”>
                    <div id=”demo”>A simple div used for testing purposes</div>
      <span id=”info” />
   <script type=”text/javascript” src=”Common.js”>
   <script type=”text/javascript”>
       function getLocation(){
          var pt1 = Sys.UI.DomElement.getLocation( $get(“demo”) );
          var pt2 = $common.getLocation( $get(“demo”) );
          $get(“info”).innerHTML = [ pt1.x + “:” + pt1.y, pt2.x + “:” + pt2.y].join(“<br />”);

Will give you a point with coords (51, 41) which also take the current borders size into account (notice that this is due to the border introduced by the parent div which has its border set; if you remove the border set to element demo, you”ll still get the same coords for the top left point).

Besides getting the location of an element, you can also set its location. Do note that this method might not do what you expect. When you use this method,you”re setting the element in relation to its relative or absolute parent. For instance,suppose you”ve got the following:

<div id=”top”>
  <div id=”parent”>parent
      <div id=”demo”>A simple div used for testing purposes</div>

If you call setLocation like this:

$common.setLocation( $get(“demo”), new Sys.UI.Point( 10, 20 ) );

what will happen? Well, simple: the demo div will de positioned according to its first absolute or relative positioned parent. So, if you set #parent”s positioning to relative or absolute, then that  div will be used as the axis from which the demo div is going to be positioned. Again, do notice that if you call getLocation and the expect to pass the coordinates you”ve got to a setLocation method call, you will not get the expected results.

In the next post i”ll keep presenting the _CommonToolkitScriptMethods and I”ll talk about (what I call) its size methods.

1 comment so far

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

    Hi. Great site.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>