Scripting differences between browsers

Topic status automatically displays here - do not remove.

Bookmark this topic  Print this topic

By Colin Ramsden, February 2007.

It appears that IE and FF have different DOM's. For example, IE has the obj.innerText property, whereas FF uses the obj.textContent property. So to identify these browsers, you can use these properties. For example:

function getObjInnerText(obj)
{
    if (obj.innerText)
    { // IE;
        return obj.innerText;
    }
    else
    {
        if (obj.textContent)
        {
            return obj.textContent;
        }
         else
         alert("Error: This application does not support your browser. Try again using IE or Firefox.");
    }
}

or using nested conditional if statements:

function getObjInnerText (obj){return(obj.innerText)?obj.innerText:(obj.textContent)?obj.textContent:"";}

document.all was specific to IE4 users, which was phased out by the W3C document.getElementbyid("id") and introduced with IE5 released with WIN98 and later. Where you see:
 document.all.theMenu.
change it to:
 document.getElementById("theMenu").

In the JavaScript representation of a web page there are several arrays. And arrays are meant to be accessed with []. Microsoft has the concept of collections in his scripting languages, which is a variation of the same subject, but these collections are accessed with (). They had the terrible idea to transfer this to its implementation of JavaScript, thus document.forms(0) works in Explorer, but in no other browser. One must always use [], i.e.: documents.forms[0].field.value and document.images[0].

http://developer.mozilla.org/en/docs/Gecko_DOM_Reference

Mozilla browsers don't support onreadystatechange, so that event won't mean much on that platform, but IE and Opera do. Use the onload event instead.

 

The front end of a website consists of three layers. XHTML forms the structural layer, which contains structural, semantic markup and the content of the site. To this layer you can add a presentation layer (CSS) and a behavior layer (JavaScript) to make your website more beautiful and user-friendly. These three layers should remain strictly separate. For instance, it should be possible to rewrite the entire presentation layer without touching either the structural or the behavior layer.

Despite this strict separation, the presentation and behavior layers need instructions from the structural layer. They must know where to add that touch of style, when to initiate that smooth bit of behavior. They need triggers.

CSS triggers are well known. The class and id attributes allow you to fully control the presentation of your websites. Although it is possible to work without these triggers, by putting the instructions in inline style attributes, this method of coding is deprecated. If you want to redefine your site's presentation while using them you're forced to change the XHTML structural layer, too; their presence violates the separation of presentation and structure.

JavaScript triggers

The behavior layer should function in exactly the same way. We should separate behavior and structure by discarding inline event handlers like onmouseover="switchImages('fearful',6,false)". Instead, as with CSS, we should use triggers to tell the script where to deploy the behavior.

The simplest JavaScript trigger is the id attribute:

<div id="navigation">
 <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
 </ul>
</div>

var x = document.getElementById('navigation');
if (!x) return;
var y = x.getElementsByTagName('a');
for (var i=0;i<y.length;i++)
 y[i].onmouseover = addBehavior;

Now the script is triggered by the presence or absence of the id="navigation". If it's absent nothing happens (if (!x) return), but if it's present all the link elements that descend from it get a mouseover behavior. This solution is simple and elegant, and it works in all browsers. If ids serve your needs, you don't have to read the rest of this article.

http://www.alistapart.com/articles/scripttriggers/

It appears that "behaviors" are stored in ".htc" files.

 

Alternatively, use script to add an event listener to an object:

  // Given the Node 'exampleNode'

  // Define the EventListener function
  function clickHandler(evt) 
  {
    // Function contents 
  }

  // The following line will add a non-capturing 'click' listener
  // to 'exampleNode'. 
  exampleNode.addEventListener("click", clickHandler, false); 

http://developer.mozilla.org/en/docs/Migrate_apps_from_Internet_Explorer_to_Mozilla

Strict standard documents must use display units for parameter values. Mozilla will ignore complete rules which do not comply.

When querying a style in script, both IE and Mozilla will return the value AND the unit. You can convert the string into a number through parseFloat("40px").

 

Who am I? > find out more