Making Your Web Page Compatible with Mozilla

Wednesday September 4th, 2002

Nicolás Lichtmaier has written a guide that explains how to make standards-compliant web pages that work with Mozilla. The article concentrates on differences in the implementations of JavaScript and the DOM in Internet Explorer and Mozilla.

#2 ... with better indentation

by c960657

Wednesday September 4th, 2002 8:44 AM

You are replying to this message

An IMO more elegant alternative to creating a findObject function and similar is to simply define the missing functions on the appropriate objects.

For example will the following code make IE4 support getElementById as specified by W3C:

if (!document.getElementById && document.all) {

____document.getElementById = new Function('id', 'return document.all[id]')


This could just be contained in a Javascript file that is included on all yor pages.

Likewise you could make a function that you call as the first thing in each event handler that adds the missing functions to the event object. After this call you can access the event object as if it were standards compliant:

function standardizeEvent(event) {

____if (!event.stopPropagation) {

________event.stopPropagation = new Function('this.cancelBubble = true')


____if (!event.preventDefault()) {

________event.preventDefault() = new Function('this.returnValue = true')

____} ____if (typeof event.layerX == 'undefined' &&

________typeof event.offsetX == 'number') {

________event.layerX = event.offsetX

________event.layerY = event.offsetY


____if (! && event.srcElement) { = event.srcElement

________if (event.type == 'onmouseout') {

____________event.relatedTarget = event.toElement

________} else if (event.type == 'onmouseover') {

____________event.relatedTarget = event.fromElement




I think this is much more elegant than doing something like

____var x = event.layerX ? event.layerX : event.offsetX

in every event handler.

I also think that it is more elegant than e.g. the library DynAPI that tries to make a browser independant DHTML implementation but uses its own object model and naming conventions instead of those defined by W3C.