Burningbird

Copy found at Wayback Machine archive.

Internet Explorer 6.x differs from IE 5.x in one very important area: In IE 6.0 and up, units must be specified with all CSS styles that take units, if you use some combination of CSS positional attributes — what combination, exactly, I haven’t been able to figure out yet. This includes width, height, as well as the positional attributes of top, left, bottom, and right. In IE 5.x and lower, as well as Mozilla and Netscape, positional attributes were given a default unit of pixel. The index card example in this chapter didn’t specify pixels with the positional attributes, and the results were completely wrong. However, after a quick fix, the example’s just fine now. That’ll teach me to be sloppy. Units should be specified in all uses.

DHTML developers can layer HTML elements one on top of each other, using a combination of visibility to hide and show elements located in the same location, or by using the CSS z-order style attribute, or both. You’ve had a chance to see visibility, but we’ll take a look at z-order layering in this section, as well as looking at layering using both techniques.

The z-order methods exposed on the X-Objects interface are:

• objGetZIndex – to get the element’s current z-order, if set
• objSetZIndex – to set the element’s current z-order

Again, Navigator 4.x has unique implementations for setting and getting the z-order:

// set element's zindex order
function nsobjSetZIndex(zindex) {
	this.css2.zIndex = zindex;
}

// get element's current zindex order
function nsobjGetZIndex() {
	return this.css2.zIndex;
}

The DOM compliant versions of objGetZIndex and objSetZIndex again use the Style object to change or access the current settings:

// set element's zindex order
function domSetZIndex(zindex) {
   this.css2.style.zIndex = zindex;
}

// get element's current zindex order
function domGetZIndex(zindex) {
   return this.css2.style.zIndex;
}

Testing z-order and layering

Instead of creating new examples to test layering, I modified existing DHTML examples to use the new X-Objects.

The first example is an emulation of a graphical button that doesn’t require an HTML form, or the use of form elements. Intead, the example uses two DIV blocks, both containing the same image, but each with a different image border. One border is set using the CSS outset setting, one using the inset setting.

The two images with the different CSS borders are layered on one another. Clicking (mouse down) on the image “hides” the top image by changing its z-order to a lower order than the image in the bottom layer. The mouse up event changes the z-order of this image layer to a higher number again, returning the “button” to the unclicked state.

Try this button effect created using X-Objects by accessing the Button page. View the source to see the code for the example.

Stacked Index Card Example

A second example I modified to use the new X-Objects is a stacked index card application. A group of names are created as separate layers each stacked on the others, with only the topmost layer being visible. Clicking on the Next and Prev command texts shows the next or previous card in the “stack”. When you access the last card in the stack, a surprise occurs: the text-based card navigation icons are replaced by labeled tabs above the cards. Clicking on the tabs displays the address associated with the tab. View the Index Card Example View the source to see the code for the example.

Copy found at Wayback Machine archive.

In addition to being able to change an HTML element’s position within a page, or hide or show the element, you can also use the X-Objects to change the HTML element’s width and height. The X-Objects interface methods to control width and height are:

• objSetWidth: set an element’s width
• objGetWidth: get an element’s width, if set
• objSetHeight: set an element’s height
• objGetHeight: get an element’s height, if set
• objResizeBy: resize an element with a given height and width

As with the movement interface methods, Navigator 4.x has unique method implementations for all but the objResizeBy method. Unlike those for the DOM compatible browsers (IE and Mozilla/Navigator 6.0), the Navigator 4.x object methods set width properties directly on the objects rather than through the use of a Style object:

// get element's width
function nsobjGetWidth() {
	return this.css2.clip.width;
}

// get element's height
function nsobjGetHeight() {
	return this.css2.clip.height;
}

// set element's width
function nsobjSetWidth(width) {
	this.css2.clip.width = width;
}

// set element's height
function nsobjSetHeight(height) {
	this.css2.clip.height = height;
}

IE and Mozilla/Navigator 6.0 apply width and height changes directly to the Style object associated with the object:

// get element's width
function domGetWidth() {
        var wd = parseInt(this.css2.style.width);
	return wd;
}

// get element's height
function domGetHeight() {
        var ht = parseInt(this.css2.style.height);
	return ht;
}

// set element's height
function domSetHeight(height) {
	this.css2.style.height = height + "px";
}

// set element's width
function domSetWidth(width) {
	this.css2.style.width = width + "px";
}

All of the X-Objects use the same implementation for the method objResizeBy:

function domResizeBy(wincr,hincr) {
   var wdth = this.objGetWidth();
   wdth += wincr;
   this.objSetWidth(wdth);

   var ht = this.objGetHeight();
   ht += hincr;
   this.objSetHeight(ht);
}

 

Testing Element Sizing

I created a Web page that uses the X-Object width and height methods. The page has a Web form and a test block created within a CSS Positioned DIV block. In the form, buttons are used by the client to shrink or grow the test block horizontally (through the width methods), or vertically (through the height methods).

The BODY contents of the test page has the following:

<DIV style="position:absolute; left:10;
        top:10; background-color: yellow;
layer-background-color: yellow; padding-top: 20px;
width: 500; height:150; clip: rect(0,500,150,0)">
<form action="">
<center>
<INPUT type="button" value="Shrink Block Horizontally"
    onclick="decr_width()"> 
<INPUT type="button" value="Grow Block Horizontally"
    onclick="incr_width()"><p>
<INPUT type="button" value="Shrink Block Vertically"
    onclick="decr_height()"> 
<INPUT type="button" value="Grow Block Vertically"
    onclick="incr_height()"><p>
</center>
</FORM>
</DIV>

<DIV id="info" style="position:absolute;
left: 250; top: 180; width: 300;
height: 300;  background-color:red;
layer-background-color: red">
<H1>Block with info</H1>
<p>
This is a block that contains two HTML elements:
   a header and a paragraph
</p>
</DIV>

The JS to perform the DHTML effects based on the choices the user makes from the form elements is:

<SCRIPT language="javascript"
type="text/javascript">
<!--
// increase width
function incr_width() {
   var wdth = theobjs["info"].objGetWidth();
   wdth+= 10;
   theobjs["info"].objSetWidth(wdth);
}

function decr_width() {
   theobjs["info"].objResizeBy(-10,0);

}
// move element up and down
function incr_height() {
   var top = theobjs["info"].objGetHeight();
   top+= 10;
   theobjs["info"].objSetHeight(top);
}

function decr_height() {
   theobjs["info"].objResizeBy(0,-10);
}

//-->
</script>

As you can see from the code, the DHTML effects based in this example are created using a combination of objGetWidth and objSetWidth, objGetHeight and ObjSetHeight, and objResizeBy. Access the Sizing example for yourself.

Copy found at Wayback Machine.

All of the X-Objects have several methods for handling visibility and movement:

• objSetLeft: set the left position of the element
• objSetTop: set the top position of the element
• objGetLeft: get the current left position of the element, if set
• objGetTop: get the top position of the element, if set
• objMoveRelative: move the object by a given horizontal and vertical change, relative to current position
• objMoveAbsolute: move the object, absolutely, by given horizontal and vertical values
• objHide: hide the object
• objShow: show the object
• objGetVisibility: show the object’s current visibility

The Navigator 4.x implementations of all of these interface methods is unique to this browser and version except for objMoveRelative and objMoveAbsolute, which are shared with the DOM and IE implementations.

The Navigator 4.x implementations of the movement and visibility methods are:

// hide element
function nsobjHide() {
	this.css2.visibility = "hidden";
}

// show element
function nsobjShow() {
	this.css2.visibility = "inherit";
}

// element's left position
function nsobjGetLeft() {
	return this.css2.left;
}

// element's top position
function nsobjGetTop () {
	return this.css2.top;
}

// set element's top position
function nsobjSetTop(top) {
	this.css2.top = top;
}

// set element's left position
function nsobjSetLeft(left) {
	this.css2.left = left;
}

 

As stated in the introduction, the IE-specific and the DOM objects (which Mozilla/Navigator 6.0 use) share much of the same interface implementations. The reason this can occur is because of a key shared concept between both browsers — all CSS properties are set through one specific object, the style object. Each HTML element has a property “style”, a reference to the Style object associated with that element and which contains all CSS settings for the element. Based on this, the implementations for movement and visibility for DOM-compatible browsers are:

// element's left position
function domGetLeft() {
      var lt = parseInt(this.css2.style.left);
	return lt;
}

// element's top position
function domGetTop () {
      var tp = parseInt(this.css2.style.top);
	return tp;
}

// set element's top position
function domSetTop (top) {
	this.css2.style.top = top + "px";
}

// set element's left position
function domSetLeft(left) {
	this.css2.style.left = left + "px";
}

// hide element
function domHide() {
   this.css2.style.visibility = "hidden";
}

// show element
function domShow() {
   this.css2.style.visibility = "visible";
}

The DOM compliant methods need to specify a unit of measurement as well as the numeric value for the new values. The X-Objects use pixels (px) for all of the DHTML effects.

The Navigator 4.x and the DOM-compatible browsers (IE and Mozilla/Navigator 6.0) share two method implementations, domMoveRelative and domMoveAbsolute, as these methods are higher-level implementations that call existing lower-level object methods to perform the actual movements:

// make absolute move
function domMoveAbsolute(newleft, newtop) {
   this.objSetLeft(newleft);
   this.objSetTop(newtop);
}

// move relative to current location
function domMoveRelative(left, top) {
   this.objSetLeft(left + this.objGetLeft());
   this.objSetTop(top + this.objGetTop());
}

By calling the exposed interface methods within the X-Object implementation, the correct version of the interface implementation is used for the movement. So, from Navigator 4.x, the left and top methods invoked when using objSetLeft and objSetTop are nsobjSetLeft and nsobjSetTop; from DOM-compatible browsers, the methods invoked are domSetLeft and domSetTop.

Now that we’ve provided the interface implementations for movement and visibility, let’s try them out.

Testing the implementations

I created an HTML page that contains a form with several buttons and a test block that is moved or hidden based on the user pushing the form buttons. The Body of the page contains the form and the test block:

<BODY onload="create_objects()">
<DIV style="position:absolute; left:10;
    top:10; background-color: yellow;
layer-background-color: yellow; padding-top: 20px;
width: 500; height:150; clip: rect(0,500,150,0)">
<form action="">
<center>
<INPUT type="button" value="Move Block Left"
        onclick="move_left()"> 
<INPUT type="button" value="Move Block right"
        onclick="move_right()"><p>
<INPUT type="button" value="Move Block Up"
        onclick="move_up()"> 
<INPUT type="button" value="Move Block Down"
        onclick="move_down()"><p>
<INPUT type="button" value="Hide Block"
        onclick="hide()"> 
<INPUT type="button" value="Show Block"
        onclick="show()"> 
<INPUT type="button" value="Show Visibility"
        onclick="get_visibility()">
</center>
</FORM>
</DIV>

<DIV id="info" style="position:absolute;
    left: 250; top: 180; width: 300;
height: 200;  background-color:red;
layer-background-color: red; clip: rect(0,300,200,0)">
<H1>Block with info</H1>
<p>
This is a block that contains two HTML elements:
        a header and a paragraph
</p>
</DIV>
</BODY>

Notice that the test block is positioned using absolute CSS positioning. This is necessary to access the DIV block with Navigator 4.x. Also, notice that the block has a reference to a CSS attribute, layer-background-color, that is not a valid CSS attribute. This is again necessary for Navigator 4.x in order for the background color to fit the block width and height, rather than just being background for the block contents.

Notice in the example that I’m not using units with the positional elements (i.e. using top: 180 instead of top: 180px) in the stylesheet settings. This was a bad habit I got into and one you shouldn’t get into. You’ll find that this can cause problems with IE 6.0. You’ll also find that if you use standard mode with Mozilla (using a particular doctype of HTML strict or HTML transitional), that the examples won’t work at all. Read more on Mozilla’s standard and “quirky” modes at Mozilla – reporting a bug.

The HTML page’s HEAD section contains the reference to the X-Objects script file and the DHTML code to implement the functions of the form buttons. These functions move the test block to the right or left, up or down, or show and hide the block. One last form button retrieves the current visibility setting for the block. The implementations of these functions are:

<SCRIPT src="cbobjects.js" language="javascript"
    type="text/javascript">
</SCRIPT>

<SCRIPT LANGUAGE = "JAVASCRIPT"
                   type="text/javascript">
<!--
// move element left
function move_left() {
   var lft = -10;
   theobjs["info"].objMoveRelative(lft,0);
}

// move element right
function move_right() {
   var lft = theobjs["info"].objGetLeft();
   lft += 10;
   theobjs["info"].objSetLeft(lft);

}

// move element up
function move_up() {
   var top = theobjs["info"].objGetTop();
   top+= -10;
   theobjs["info"].objSetTop(top);
}

// move element down
function move_down() {
   var top = theobjs["info"].objGetTop();
   top += 10;
   var lft = theobjs["info"].objGetLeft();
   theobjs["info"].objMoveAbsolute(lft,top);
}

// hide element
function hide() {
   theobjs["info"].objHide();
}

// show element
function show() {
   theobjs["info"].objShow();
}

function get_visibility() {
   alert(theobjs["info"].objGetVisibility());
}
//-->
</script>

You can access the Movement and Visibility testing page, using Internet Explorer 4.x and up, Navigator 4.x and up, and Mozilla.

I converted one of my existing DHTML pages to use the X-Objects. This page contains an Animated Menu using both the movement and visibility methods, and a timer to create the animation effect. Once you open the page, the menu animation starts. To see the code used, View source once the example is opened.

Another existing DHTML example is relatively simple, using hidden DIV blocks to create a “shadow” effect for Web page text. The example moved as is to the new X-Objects (as did the animated menu, above) without any modifications. Check out the Shadow Effect example, using View source once the example is opened to see the script.

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.