Scripting for 5th Generation Browsers and Beyond

Object Constructors

Having worked our way through the basic premise of detection routines and if/else statements, let's begin to build our JavaScript object construction routine. The purpose of this section of the script is to convert CSS layers into JavaScript objects that can be easily dynamically manipulated later on in the scripting routine.

function layerObject(id,position,left,top,visibility) {
if (is.ie5|| is.ie55||is.ie6|| is.ns6){
this.obj = document.getElementById(id).style;
this.obj.position = position;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;
}
}

The script is dedicated to creating attributes for JavaScript objects. A good way to think of this is to conceptualize a CSS layer written in the body section of your document. In the definition below, note how the initial positioning is set to 0 and visibility to hidden. Later on we will dynamically position the layer and also toggle its visibility to visible.

<div id="centerLayer" 
     style="position: absolute; width:200px; height:24px; 
            left: 0px; top: 0px; z-index: 6; 
            visibility: hidden;"> </div>

You will notice that in the div tag we have an id attribute. Similarly, in our layer object we also assign an id attribute. The reasoning behind this is that what we are attempting to achieve is a JavaScript replication of the CSS layer attributes. Following this course of logic, we then assign more CSS layer attributes to the layerObject script. We assign, position, top, left and visibility. More attributes could be assigned as needed, for instance we could include z-index, height, width and so on. The object constructor can become very detailed and thus ideally open itself to a myriad of dynamic manipulations. For the purposes of this article, however, let's stick with just a couple of basic attributes to get accustomed to the concepts presented here.

It is important to note that, in reality, our object constructor has not really created anything. All we have done is prepared our documents for the creation of new layer objects. Therefore, we need to focus our attention on actually creating new layer objects. This is achieved with the layerSetup() script.

function layerSetup() {
	centerLyr = new layerObject('centerLayer','absolute', 
                                     page_width/2-100,
                                     page_height/2-12,
                                     'visible');
}

The first line defines the function's name. The second line does quite a few things so let's pull it apart to better understand it.

We create a new variable centerLyr and tell the browser that it equals a new layerObject(). The sole purpose of this section of the JavaScript statement is to hook back into our layerObject() script so that we can then assign the specific values needed for that particular layer. You can identify the attribute value that belongs to the layerObject() properties by looking at the following table.

The upshot of this little piece of scripting is that we end up with a new JavaScript object called centerLayer which has the CSS attributes of positioning, left, top, and visibility assigned to it. From a scripting perspective this is enormously useful because if we so wished we could then manipulate any of the CSS properties - as we shall see later on in this article.