Cross-Browser Solutions: Detection and Generic Functions

Like this article? We recommend

Special Edition Using JavaScript

Learn More Buy

Like this article? We recommend

Like this article? We recommend 

Special Edition Using JavaScript

Learn More Buy

Creating a Custom Object Front End

The library of cross-browser code that I'll introduce to you in the rest of this chapter uses as its base a custom object front end, as described in general terms earlier in this chapter. More specifically, I use code to create a custom object for every <div> and <span> tag in the current document because these are the elements that you can manipulate via DHTML in all three object models.

The next couple of sections show you the structure of these custom objects as well as the code that constructs them.

Examining the Object

Listing 1 shows the dhtml_object() constructor function that's used to create each custom object.

Listing 1: The Constructor Function for the Custom Object

function dhtml_object (obj, css, id) {
  this.obj = obj
  this.css = css
  this.id = id
  this.left = get_left
  this.right = get_right
  this.top = get_top
  this.bottom = get_bottom
  this.width = get_width
  this.height = get_height
  this.visibility = get_visibility
  this.zIndex = get_zIndex
  this.move_to = move_to
  this.move_by = move_by
  this.set_left = set_left
  this.set_top = set_top
  this.set_width = set_width
  this.set_height = set_height
  this.set_visibility = set_visibility
  this.set_zIndex = set_zIndex
  this.move_above = move_above
  this.move_below = move_below
  this.set_backgroundColor = set_backgroundColor
  this.set_backgroundImage = set_backgroundImage
  this.set_html = set_html
  this.get_clip_top = get_clip_top
  this.get_clip_right = get_clip_right
  this.get_clip_bottom = get_clip_bottom
  this.get_clip_left = get_clip_left
  this.get_clip_width = get_clip_width
  this.get_clip_height = get_clip_height
  this.resize_clip_to = resize_clip_to
  this.resize_clip_by = resize_clip_by
}

Table 1 summarizes the properties and methods in this object.

Table 1 Properties and Methods of the Custom Object

Cross-Browser Style References

Of the various properties and methods shown in Table 1, one of the most important from a cross-browser point of view is the css property. This property holds information on how the user's browser refers to styles. To see why this is important, let's look again at how each of the three object models refer to styles.

For the W3C DOM, you first get a reference to an object using getElementById() and then access the style property. For example, here's some code that gets a reference to a <div> tag with id equal to my_div and then sets the element's left style:

document.getElementById("my_div").style.left = 0

For Internet Explorer 4's DHTML DOM, you use document.all to get a reference to the element and then use the style property. Here's an example:

document.all.my_div.style.left = 0

For Netscape 4's LDOM, you use document.layers to get a reference to the element and then set the style attribute directly. Here's an example:

document.layers.my_div.left = 0

These are quite different, as you can see. To "hide" this difference from your code, the custom dhtml_object uses its css property, which holds the object reference followed by whatever the browser uses to access styles. Here's what the css property stores for the above examples:

The custom object hides all this inside css, so to set any style, you use the following syntax:

Custom_Object.css.Style = Value

For example, if the current_object variable references one of these custom objects, you'd use the following statement to set the value of the left style to 0:

current_object.css.left = 0

Creating the Custom Objects

Before you can use the properties and methods of the dhtml_object, you have to create one of these custom objects for every <div> and <span> tag in your page. That's the job of the code in Listing 2.

Listing 2: Creating the Custom Objects

// This array holds all of the document's DHTML-able objects
var dhtml_objects = new Array()

// This function creates the custom objects 
// that serve as cross-browser front-ends
function create_object_array() {

  // All the <div> and <span> tags are stored in these variables
  var div_tags
  var span_tags
  var css_tags

  // Is the browser W3C DOM compliant?
  if (document.getElementById) {
  
    // If so, use getElementsByTagName() to get the <div> tags
    div_tags = document.getElementsByTagName("div")

    // Loop through the <div> tags
    for (var counter = 0; counter < div_tags.length; counter++) {

      // Store the current object
      current_object = div_tags[counter]
      
      // Store how the browser accesses styles
      object_css = current_object.style
      
      // Store the object's id
      object_id = current_object.id
      
      // Only store those tags that have an id
      if (object_id) {
      
        // Create a new dhtml_object and store it in dhtml_objects
        dhtml_objects[object_id] = new dhtml_object(current_object,
                              object_css, 
                              object_id)
      }
    }
    
    // Use getElementsByTagName() to get the <span> tags
    span_tags = document.getElementsByTagName("span")
    
    // Loop through the <span> tags
    for (var counter = 0; counter < span_tags.length; counter++) {
      
      // Store the current object
      current_object = span_tags[counter]
      
      // Store how the browser accesses styles
      object_css = current_object.style
      
      // Store the object's id
      object_id = current_object.id
      
      // Only store those tags that have an id
      if (object_id) {
      
        // Create a new dhtml_object and store it in dhtml_objects
        dhtml_objects[object_id] = new dhtml_object(current_object,
                              object_css, 
                              object_id)
      }
    }
  }
  
  // Is the browser DHTML DOM compliant?
  else if (document.all) {
    
    // If so, use document.all to get the <div> tags
    div_tags = document.all.tags("div")
    
    // Loop through the <div> tags
    for (var counter = 0; counter < div_tags.length; counter++) {
    
      // Store the current object
      current_object = div_tags[counter]
      
      // Store how the browser accesses styles
      object_css = current_object.style
      
      // Store the object's id
      object_id = current_object.id
      
      // Only store those tags that have an id
      if (object_id) {
      
        // Create a new dhtml_object and store it in dhtml_objects
        dhtml_objects[object_id] = new dhtml_object(current_object,
                              object_css, 
                              object_id)
      }
    }

    // Use document.all to get the <span> tags
    span_tags = document.all.tags("span")
    
    // Loop through the <span> tags
    for (var counter = 0; counter < span_tags.length; counter++) {
    
      // Store the current object
      current_object = span_tags[counter]
      
      // Store how the browser accesses styles
      object_css = current_object.style
      
      // Store the object's id
      object_id = current_object.id
      
      // Only store those tags that have an id
      if (object_id) {
      
        // Create a new dhtml_object and store it in dhtml_objects
        dhtml_objects[object_id] = new dhtml_object(current_object,
                              object_css, 
                              object_id)
      }
    }
  }
  
  // Is the browser LDOM compliant?
  else if (document.layers) {
  
    // Use document.layers to get the positioned <div> and <span> tags
    css_tags = document.layers

    // Loop through the layers
    for (var counter = 0; counter < css_tags.length; counter++) {
      
      // Store the current object
      current_object = css_tags[counter]
      
      // Store how the browser accesses styles
      object_css = current_object
      
      // Store the object's id
      object_id = current_object.id
      
      // Only store those tags that have an id
      if (object_id) {
      
        // Create a new dhtml_object and store it in dhtml_objects
        dhtml_objects[object_id] = new dhtml_object(current_object,
                              object_css, 
                              object_id)
      }
    }
  }
}

This script opens by declaring the global dhtml_objects array, which will hold the custom objects created for each <div> and <span> tag. The script then runs the create_object_array() function, which is used to add the custom objects to the dhtml_objects array.

The function begins by declaring the div_tags, span_tags, and css_tags variables, which are used to hold the collections of <div> and <span> elements in the page. Then the function performs some object detection, which in broad strokes looks like this:

if (document.getElementById) {
  Work with the elements using W3C DOM code
}
else if (document.all) {
  Work with the elements using DHTML DOM code
}
else if (document.layers) {
  Work with the elements using LDOM- code
}

For the W3C DOM branch, the function first uses the getElementsByTagName() method to return a collection of the document's <div> elements, which is stored in the div_tags variable. Then a for() loop runs through all the <div> elements and performs five tasks for each element:

1. It stores the element itself in current_object.

2. It stores how the element accesses styles in object_css.

3. It stores the element's id in object_id.

4. It checks to see if the element has an id value (we want to ignore those that don't have one).

5. It calls the dhtml_object() constructor function to create a custom object for the element. Note that the current_object, object_css, and object_id variables are passed as the function's obj, css, and id arguments. The resulting object is stored in the global dhtml_objects array.

The function then repeats this process for the document's <span> tags.

For the DHTML DOM branch, the function does basically the same thing. The major difference is that it uses document.all.tags to return the <div> and <span> collections.

The LDOM branch is shorter because the function gets all the positioned <div> and <span> tags in one shot by using document.layers.

Using a Custom Object

It's important to note here that the index of the dhtml_objects array that's assigned to each custom object is not the usual numeric value starting at 0. Instead, the index is the object_id value, so that's how you refer to one of these objects in the array. For example, if a <div> element has an id equal to my_div, then the following expression refers to that element's custom object in the dhtml_objects array:

dhtml_objects["my_div"]

From here, you access the custom object's properties and methods just as you would any object. For example, the following expression returns the my_div custom object's id property:

dhtml_objects["my_div"].id