Loupe.js

bordalix — Fri, 04 May 2007 07:28:00 -0500

Christian Effenberger developed Loupe.js, which allows you to add a magnifier to an object on your page. To use it, all you have to do is to download a Javascript file and a small PNG image, and insert the following line of code in the place you want to have the magnifier:

<div>
<img id="..." onLoad="initLoupe(this.id);" ...>
</div>

The result is something like this (click here to see it working):

lastChild in Mozilla browsers

bordalix — Tue, 24 Apr 2007 07:13:00 -0500

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.

The place João Bordalo calls home: Tag javascript

Loupe.js

lastChild in Mozilla browsers