Extending HTML Elements

Introduction

The previous pages showed code to extend HTML element constructors for IE, Firefox and Safari. Now the two techniques are combined into a cross browser solution. Some small changes are made in the technique for IE.

Hide Show Coordinates

  Add methods to HTMLElement.prototype

To demonstrate the technique, the same three methods are added to the Element constructor: show, hide, and getCoordinates.

if (!window.Element){
    window.Element = function(){};
    window.htmlObj = new Element();
}
if (window.Element) {
    Element.prototype.show = function() {
        this.style.visibility = "visible";
    };
    Element.prototype.hide = function() {
        this.style.visibility = "hidden";
    };
    Element.prototype.getCoordinates = function() {
        /* This gets coordinates within the offset parent object.
         * The correct method to get page coordinates is 
         * more complex.
        */
        var xy = {};
        xy.x1 = this.offsetLeft;
        xy.y1 = this.offsetTop;
        xy.x2 = this.offsetLeft + this.offsetWidth;
        xy.y2 = this.offsetTop + this.offsetHeight;
        return xy;
    };
}

The first line tests if the window.Element object exists. If not, the browser is IE and an Element constructor is created. Using window.Element is the same as using Element without the var keyword. All global variables are properties of the window object. The Element constructor simply provides a place to define the functions, and the object instance, htmlObj is just a convenient reference from which to copy the function pointers later. Any name could be used, but "Element" streamlines the code as it matches the lines where the functions are defined. This is a small change for IE so we can keep the method definitions in one place. After that, the code is the same as Extending HTMLElement in Firefox.

  CSS for IE Behaviors

<!--[if IE]>
    <style type="text/css">
        * {behavior: url(ie_ext_element_xb.htc);}
    </style>
<![endif]-->

IE Conditional comments are used to add the CSS code only for IE. The URL references the HTC file.

  HTC file

Methods are added to IE HTMLElements throught HTC files.

<public:component>
    <attach for="element" />
    <public:method name="show" internalname="_show"/>
    <public:method name="hide" internalname="_hide"/>
    <public:method name="getCoordinates" internalname="_getCoordinates"/>
    <script type="text/javascript">
        _show = htmlObj.show;
        _hide = htmlObj.hide;
        _getCoordinates = htmlObj.getCoordinates;
    </script>
</public:component>

This example differs from Extending HTMLElement: IE by creating an instance of the Element constructor that was extended in the JavaScript. Again, this is a user defined object and htmlObj is an instance of a user defined object. The methods of that object are assigned to the elements specified in the CSS. The advantage to this technique is that the methods are defined in one place. Also, methods are assigned by reference rather than copied so this doesn't use additional memory.

The type of HTML element to which the methods are added can be restricted using the techniques shown on the previous pages.