Copy found on Wayback Machine.
The original cross-browser objects encapsulated browser-specific DHTML implementation behind a set of exposed interfaces, making it easier to change the implementation if needed, and easier to create and maintain my DHTML pages. When a new browser version (or browser) releases, I can make changes to handle the new implementation details in one place, the cross-browser object file, rather than within each page that uses DHTML.
So, instead of doing something similar to the following:
if (navigator.appName == "Microsoft Internet Explorer") {
document.all.div2.style.posLeft=incr;
document.all.div1.style.posLeft=incr;
}
else {
document.div2.left=incr;
document.div1.left=incr;
}
I can instead use:
theobjs["div2"].objSetLeft(incr); theobjs["div1"].objSetLeft(incr);
If a browser changes its implementation, then all I need to do is modify the interface method, such as objSetLeft from the example, rather than have to modify the DHTML in each page where I set the element’s leftmost position using DHTML.
The cross-browser objects became cross-version when they provided support, with little modification, for the release of IE 5.x — a mark of a successful use of a technology. However, the true test for these beasties is the release of Mozilla/Netscape 6.0. We’ll find in this section, and the ones to come, that the cross-browser objects did require some modifications, though not to the existing interface methods. Instead, new methods have been added to handle new functionality, as well as changed functionality. Because of these changes, and the fact that the objects are now cross-browser, cross-version, and cross-DOM, I’ve renamed the objects to X-Objects.
We’ll take a look at how the X-Objects are created, and then in the following sections we’ll look at the browser-specific implementations of the X-Object interface, and examples using the new X-Objects.
X-Objects: object constructors
My old cross-browser objects are an array of DIV objects. I focused on DIV objects as both Netscape 4.x and IE 4.x supported pulling all CSS-positioned DIV blocks from a page. Additionally, I could create most DHTML effects just by manipulating DIV blocks. To maintain backwards-compatibility with Netscape 4.x, my new X-Objects are still pulling in absolutely positioned DIV blocks as DHTML objects. You’ll see later on in the examples that this still gives us considerable room to create our DHTML effects.
Every page that uses the X-objects to create DHTML includes an external Javascript file, pulled into the page using the following tag:
<SCRIPT src="cbobjects.js" type="text/javascript" language="javascript"> </SCRIPT>
Additionally, the x-objects are created by calling a constructor method from this file: create_objects. The create_objects function tests to see what browser is accessing the page, and calls a browser-specific version of a DHTML object constructor function based on the browser. The X-Objects create_objects tests for the navigator name of “Microsoft Internet Explorer” and calls create_ie_objects if found. The code could be modified to test for version and call the function create_ie_objects function for IE 4.x, and create_dom_objects for 5.x and up. If the browser is Mozilla or Netscape, create_dom_objects is called if the version is newer; else the function create_ns_objects is called for Netscape Navigator 4.x:
function create_objects() {
// Internet Explorer 4.x, 5.x, 6.x
if (navigator.appName == "Microsoft Internet Explorer")
create_ie_objects();
else // Navigator or Mozilla
if (navigator.appName == "Mozilla" ||
navigator.appName == "Netscape")
if (navigator.appVersion.indexOf("4.") == -1)
create_dom_objects();
else
create_ns_objects();
}
The create_ns_objects method pulls the CSS positioned DIV blocks from the Layers collection and loads into an array, theobjs. This array is then accessed by the page creating the DHTML effect:
// For Navigator 4.x, pull all DIV blocks into object array
function create_ns_objects(newarray) {
theobjs = new Array();
for (i = 0; i < document.layers.length; i++){
if (document.layers[i].name != "")
theobjs[document.layers[i].name] =
new ns_object(document.layers[i]);
}
}
The create_dom_objects uses the getElementsByTagName method exposed with DOM Level 1, and pulls in all DIV blocks:
// For W3C DOM (Netscape 6.x, Mozilla), pull
// all named DIV blocks into an array
function create_dom_objects() {
theelements = document.getElementsByTagName("DIV");
theobjs = new Array();
for (i = 0; i < theelements.length; i++) {
var obj = theelements[i];
if (obj.id != "")
theobjs[obj.id] = new dom_object(obj);
}
}
As you can see with both the Navigator and the DOM objects, only named DIV blocks are pulled into the DHTML object array.
The IE objects could also use the getElementsByTagName method, but I want the objects to be compatible with IE 4.x, which doesn’t support the DOM Level 1 release, so I’ll use Microsoft’s proprietary document.all collection to pull in the DIV elements:
// For IE, pull all DIV blocks into object array
function create_ie_objects() {
theelements = document.all.tags("DIV");
theobjs = new Array();
for (i = 0; i < theelements.length; i++){
if (theelements[i].id != "") {
theobjs[theelements[i].id] =
new ie_object(theelements[i]);
}
}
}
The DHTML array contains references to the X-objects created specifically for the browser. Each of these objects consists of the exact same interfaces, but pointing to different implementations of the functionality.
The Navigator object and it’s associated interface is:
// The Navigator DOM Object
//
//************************************************
function ns_object(obj) {
this.css2 = obj;
this.name = obj.name;
this.objResizeBy = domResizeBy;
this.objHide = nsobjHide;
this.objShow = nsobjShow;
this.objDisplay = nsobjDisplay;
this.objGetLeft = nsobjGetLeft;
this.objGetTop = nsobjGetTop;
this.objSetTop = nsobjSetTop;
this.objSetLeft = nsobjSetLeft;
this.objMoveAbsolute = domMoveAbsolute;
this.objMoveRelative = domMoveRelative;
this.objGetWidth = nsobjGetWidth;
this.objGetHeight = nsobjGetHeight;
this.objSetHeight = nsobjSetHeight;
this.objSetWidth = nsobjSetWidth;
this.objSetZIndex = nsobjSetZIndex;
this.objGetZIndex = nsobjGetZIndex;
this.objSetClipRect = nsobjSetClipRect;
this.objGetClipRect = nsobjGetClipRect;
this.objGetClipLeft = nsobjGetClipLeft;
this.objGetClipRight = nsobjGetClipRight;
this.objGetClipTop = nsobjGetClipTop;
this.objGetClipBottom = nsobjGetClipBottom;
this.replace_html = nsreplace_html;
this.objReplaceHTML = nsParamReplaceHTML;
this.objReplaceText = nsReplaceText;
this.objGetVisibility = nsVisibility;
}
If you’ve used my previous version of the cross-browser objects, you’ll see that the X-Object interface is the same as the cross-browser interface, with the addition of a few new interface methods. This highlights one very important point: the key to a successful use of object-based technology is never to remove or take away from an interface — new changes should result in growth not destruction.
The parameter to the object constructor is the actual browser-implemented object, which is then assigned to the X-Object’s css2 property. This property wrapping is necessary in order to be able to use the properties and methods supplied by the browser-specific object.
The dom_object and the ie_object point to the same method implementations for most of the exposed interface functionality:
// The W3C DOM Object
//
//****************************************************
function dom_object(obj) {
this.css2 = obj;
this.name = obj.id;
this.objResizeBy = domResizeBy;
this.objHide = domHide;
this.objShow = domShow;
this.objDisplay = domDisplay;
this.objGetLeft = domGetLeft;
this.objGetTop = domGetTop;
this.objSetTop = domSetTop;
this.objSetLeft = domSetLeft;
this.objMoveAbsolute = domMoveAbsolute;
this.objMoveRelative = domMoveRelative;
this.objGetWidth = domGetWidth;
this.objGetHeight = domGetHeight;
this.objSetHeight = domSetHeight;
this.objSetWidth = domSetWidth;
this.objSetZIndex = domSetZIndex;
this.objGetZIndex = domGetZIndex;
this.objSetClipRect = domSetClipRect;
this.objGetClipRect = domGetClipRect;
this.objGetClipLeft = domGetClipLeft;
this.objGetClipRight = domGetClipRight;
this.objGetClipTop = domGetClipTop;
this.objGetClipBottom = domGetClipBottom;
this.replace_html = domReplaceHTML;
this.objReplaceHTML = domParamReplaceHTML;
this.objReplaceText = domReplaceText;
this.objGetVisibility = domGetVisibility;
}
// The IE 4.x and 5.x DOM Object
//
//***************************************************
function ie_object(obj) {
this.css2 = obj;
this.name = obj.id;
this.objResizeBy = domResizeBy;
this.objHide = domHide;
this.objShow = domShow;
this.objDisplay = domDisplay;
this.objGetLeft = domGetLeft;
this.objGetTop = domGetTop;
this.objSetTop = domSetTop;
this.objSetLeft = domSetLeft;
this.objMoveAbsolute = domMoveAbsolute;
this.objMoveRelative = domMoveRelative;
this.objGetWidth = domGetWidth;
this.objGetHeight = domGetHeight;
this.objSetHeight = domSetHeight;
this.objSetWidth = domSetWidth;
this.objSetZIndex = domSetZIndex;
this.objGetZIndex = domGetZIndex;
this.objSetClipRect = domSetClipRect;
this.objGetClipRect = domGetClipRect;
this.objGetClipLeft = domGetClipLeft;
this.objGetClipRight = domGetClipRight;
this.objGetClipTop = domGetClipTop;
this.objGetClipBottom = domGetClipBottom;
this.replace_html = domReplaceHTML;
this.objReplaceHTML = ieParamReplaceHTML;
this.objReplaceText = domReplaceText;
this.objGetVisibility = domGetVisibility;
}
The main reason why I’m sharing implementations is that the functionality to make the DHTML effect is the same with a DOM-compliant browser as it is for IE — with some minor differences, that we’ll get to in later sections.
We’ll look at the implementation of these interface methods and test them out in the next pages.