The place João Bordalo calls home

lastChild in Mozilla browsers

Posted by bordalix Tue, 24 Apr 2007 12:13:00 GMT

For a while now I've been receiving some complaints about the comments in this blog: people using Mozilla based browsers weren't able to see the BlindDown effect when posting comments, and since they did not receive any other message about the comment being correctly posted, they posted it several times.

The error message received was this:

$(element).style has no properties
[Break on this error] $(element).style.height = '0px';
effects.js (line 369)

After some heavy Javascript debugging, I found out the bug: Mozilla browsers add nodes for white space (in my case, in between LI elements), so it was calling the wrong node for the BlindDown effect (it was calling a white space). Here goes the original code:

function commentAdded(request) {
  new Effect.BlindDown($('commentList').lastChild);
  $('commentform').elements[3].value = '';
  $('commentform').elements[3].focus();
}

The solution was to add a new javascript line before the Effect.BlindDown call, cleaning all white spaces. Here is the corrected code:

function commentAdded(request) {
  Element.cleanWhitespace('commentList');
  new Effect.BlindDown($('commentList').lastChild);
  $('commentform').elements[3].value = '';
  $('commentform').elements[3].focus();
}

So, the lesson is: every time you use a lastChild call, be aware of the white spaces for the Mozilla browsers. Hope it helps, thanks to all who pointed the bug.

Update: after a lunch conversation, I've decided to post the bug in the Mozilla foundation bugzilla. If you want to, you can check the status by accessing bug #378593.