Creating DHTML Applications - (3/8) | WebReference

Creating DHTML Applications - (3/8)

To page 1To page 2current pageTo page 3aTo page 3bTo page 4To page 4aTo page 5
[previous][next]

Creating DHTML Applications

Technique

Let's have a look at a JavaScript implementation of the above methodology. I will describe each of the three levels of the development by way of a simple example. In the BEHAVIOR level, we will change the properties of objects. For example, we will want to move a layer and therefore we will have to change the left-property of that DOM-level object.

So, I will start with the 'deepest' level, the 'DOM level,' because that will be the base for the 'PROPERTY level,' which, on itself will be the base for the 'BEHAVIOR level.'

Solving problems on the DOM-level: the mElement() function

The 'mElement()' function is the function that I have created to refer to objects in a document. Let's have a look at an example (opens in new window) that shows the different uses of the mElement function.

The standard (W3C) way of referring to an object in a document, in JavaScript, is:

document.getElementById(elementName)

Unfortunately this standard has not been implemented in all browsers, therefore the mElement() function deals with 2 exceptions on that standard: old versions of MSIE will use a 'document.all.elementName' syntax, and Netscape a completely different syntax.

Netscape 4.x browsers are implemented as follows:

mElement syntax Netscape syntax
mElement('mainLayer') document.layers['mainLayer']
mElement('mainLayer','DoC') document.layers['mainLayer'].document
mElement('myImage','iMageZ') document.images['myImage']
mElement('myImage2','mainLayer','iMageZ') document.layers['mainLayer'].document.images['myImage2']
mElement('myForm','mainLayer','ForMz') document.layers['mainLayer'].document.forms['myForm']
mElement('secondLayer','mainLayer') document.layers['mainLayer'].document.layers['secondLayer']

Older MSIE browsers that use the 'document.all' syntax, will only take the first argument of the mElement function into consideration, and will use that argument to create a 'document.all' string, e.g.: mElement('myImage2','mainLayer','iMageZ') would create: document.all.myImage2.

Finally, all other browsers will use the 'document.getElementById' syntax. For these browsers, mElement is also only taking the first argument of the function, and is constructing a W3C standard string, e.g.: mElement('myImage2','mainLayer','iMageZ') would be: document.getElementById('myImage2').

So the function builds a string depending on the browser capabilities (not the browser details). Then the function 'evaluates' the string to create and return the required DOM object.

Exceptions are fairly easy to add, which makes this function relatively 'future proof' and easy to maintain.

Contents:

To page 1To page 2current pageTo page 3aTo page 3bTo page 4To page 4aTo page 5
[previous][next]


Created: July 23, 2001
Revised: July 23, 2001

URL: http://webreference.com/programming/javascript/dhtmlapps/3.html