Posts about javascript

I haven't dug down to the bottom of this but basically Element.descendantOf(elm, ans) gives different results from IE vs FF.

Wow, FF3 broke my app!

I had a line like this(sorry this code uses prototype.js, but it's not specific to it):
myDiv.setStyle({
    position: 'absolute',
    top: elmPos.top + elm.offsetHeight,
    left: elmPos.left,
    width: elm.offsetWidth - 5});

This won't work anymore because starting FF3, you can't set the attributes: top, left, width, height to numeric values anymore, they have to labeled with a unit, like so:
myDiv.setStyle({
    position: 'absolute',
    top: asPx(elmPos.top + elm.offsetHeight),
    left: asPx(elmPos.left),
    width: asPx(elm.offsetWidth - 5)});

Where asPx is:
function asPx(n){
    return n + 'px';
}

This behaves differently on FF vs IE. If you do:

textInput.value = "line one\nline two";

Where textInput is an input element with type="text". FF ignores the second line and sets the value to the contents of the first line, whereas IE removes the newlines and merges all the lines into one.

With prototype.js, you should use element.up() instead of element.parentNode. This is again because of this browser difference.

Let's say you have markup like follows:
<div id="foo">
        <div id="bar">hey</div>
</div>
In IE, document.getElementById('foo').childNodes.length gives you 1, but FF gives you 3, with the first and last items being text elements representing the newline and white space in between. This means you cannot rely on accessing childNodes directly by index.

Solution:
If you are using prototype.js, use firstDescendant() instead of childNodes[0]. Use select() to get select the elements you want instead of traversing childNodes directly.

FF has a built-in Element "class". Which means that you can extend it like this:
Element.prototype.mymethod = function(){
  //blah
}
and have the method be available from any dom element, no prototype.js needed.
document.getElementById('myDiv').mymethod();
This is what explains this previous post.

Element.extend is an important method is the prototype framework. It adds all the helper/mixin methods to a dom element, like this:
Element.extend(myElem);
If for some reason you have to do this manually(probably in IE), this is what you need.

Phew! This one bug took me hours to track down the root cause. Which is this: If you set a non-standard attribute on a dom element, say _eventID, like so:
$('myDiv')._eventID = 12
Now, the _eventID attribute will be displayed inside the innerHTML of any of its ancestors in IE, but not in FF:
$('myDiv').parentNode.innerHTML
in IE you'd see something like:
<div id=myDiv _eventID="12">...</div>
in FF(keep in mind the value is still saved, just doesn't show up in the innerHTML):
<div id="myDiv">...</div>

You can't use it as the name of a variable or 'naked' as the key of a hash. Both are allowed in FF.

I've finally gotten the hang of the Microsoft Script Debugger. I can now debug Ajax code in IE with relative ease. Before this, the error line number IE gives is always wrong, so there's no good way to know what is wrong with your code. I tried firebug lite, which provides the console, and is handy, but it has no debugging capability. The Script Debugger is very different from firebug, so you have to get use to it, and even maybe read the help pages. But once you figure out, it's very helpful, well because you are comparing it to having not debugger or a use full stacktrace message at all. It does have a command window, which is kinda different from firebug also, but once again, you can get used to it. And the call stack window is very useful for spotting where an error has occured.

Negatives: it does crash a lot, as with everything Microsoft. And once it had a bug where the included javascript files in the page would not show up at all. It was eventually fixed I think after a reboot. Still, better than nothing.

Dude, this is wrong. According to this and other resources, plus my own experimentation has confirmed, you cannot set the innerHTML of a TR element in a table in IE. In FF this works fine, provided it maintains the integrity of the table structure. But in IE it throws an "Unknown runtime error". This breaks the whole strategy used in my collection widget...definitely not fun.

In FF:
[1,2,3,].length
gives you 3, but in IE:
[1,2,3,].length
gives you 4, and
[1,2,3,][3]
gives you undefined