A Tutorial in Cross-Browser DHTML

.
Meta DHTML Part II: Function Libraries

We can see syntax patching as a way of creating building blocks; meta-language building blocks from which we construct cross-browser DHTML code. In this view, though, syntax patching creates very small building blocks -- one per "word," as in our Spench example. It is useful, then, to start combining this building blocks into larger units; for example, we can use Spench to say "house" but how can we use Spench to say "Where is the house?".

One answer would be to combine each Spench words which makes up the question Where is the house. Suppose, though, that we needed to ask this question repeatedly. Constructing this question out of building blocks each time is inefficient -- the solution is to begin building meta-language function libraries.

Turning back to DHTML, suppose that we need to know the left-hand position of a content block. This is a valuable piece of information that may be needed at several different times throughout our code. Assuming the same common vocabulary we created in the earlier example, let's proceed with a function which employs this meta-language:

function whereLeft(objName) { 
 leftPos=eval(obj+objName+left);
 return leftPos
}

Now, whenever we need to read the lefthand position of the object in a calculation we simply call the whereLeft() function without regard to browser variety; for example:

deltaX=600-whereLeft("block1");

Creating cross-browser function libraries allows you almost limitless possibilities in writing cross-browser code. Imagine that you'd like a function moveBy() which accepts two parameters, dx and dy, and it moves the content block by those coordinate values -- meaning, a call to moveBy("block1",5,-10) would move block1 5 pixels to the left and 10 pixels up towards the top. In fact, Netscape's DOM does possess a moveBy() method as part of the layer object, but Microsoft's DOM does not have an equal. Not a problem, as we can easily create an all new moveBy() method which works in both browsers and is transparent to our code. Again, assume that we're still using the common vocabulary from the syntax patching defined earlier:

function moveBy(objName,dx,dy) {
 newLeft=eval(obj+objName+left)+dx;
 newTop=eval(obj+objName+top)+dy;
 eval(obj+objName+left)=newLeft;
 eval(obj+objName+top)=newTop
}

Notice that the first line in our moveBy() function is similar in nature to the whereLeft() function we created earlier. In fact, if our code contained both of these functions, plus a similarly designed whereTop() function, we could streamline moveBy() even further:

function moveBy(objName,dx,dy) {
 eval(obj+objName+left)=whereLeft(objName)+dx;
 eval(obj+objName+top)=whereTop(objName)+dy
}

Now, if you catch the drift, we've begun to build a meta-language function library. That is, a set of functions, all of which operate on meta-language principles allowing for cross-browser coding. Conceivably, we could build an entire library of functions like this which become a meta-language atop both Document Object Models.

In fact, some clever folks have already produced some cross-browser DHTML function libraries. The idea is that you can adopt these libraries for use in your own code without having to stress over the distinctions between the DOM's. Now, whether or not you want to use these pre-written function libraries or create your own from scratch is a personal choice. Using someone else's library means learning all the new functions, but saves the time of coding them. Creating your own library offers you maximum flexibility yet takes time and a good working knowledge of the native DOM's.