Today, Johan Nyberg from Gothia informed me about a problem in the MediaCircle DLC on FireFox 3.x. The images in the zoom-view do not show up. Instead, white boxes are rendered, which zoom along when the zoom-slider is changed.

Although we do not support the MediaCircles, they are used quite a lot in demos and presentations. Therefore, we thought it was worthwhile to at least investigate the issue.

The problem

Apparently, in FireFox since version 3, when an IMG tag has no src attribute, the DOM properties width and height are set to 0 instead of the values specified in the HTML attributes.

When you have by example:

<img width='100' height='100' />

When accessing this IMG tag by JavaScript, you get the following behavior:

1
2
3
4
5
6
7
8
9

var img = document.getElementById(" id of the image ");
var w;

// Access properties.
w = img.width; // w is 0
w = img.clientWidth; // w is 0

// Access attributes
w = img.getAttribute("width"); // w is the string "100".

And, of course, the JavaScript code in the MediaCircle DLC did use the DOM properties width and height.

The solution

Open up the file SliderView.js (which is located in the Scripts directory of the website). At the bottom of the file, you'll find the following method:

1
2
3
4
5
6
7
8
9
10
11
12
13

MC.SliderItem = function(img) {

    this.img = img;

    this.originalWidth = img.clientWidth;
    this.originalHeight = img.clientHeight;
    
    this.imageWrapper = img.parentNode.parentNode;
    this.item = img.parentNode.parentNode.parentNode;
    
    this.aligner = img.parentNode.previousSibling;
    
}

Replace the method with the next one, which contains the solution

1
2
3
4
5
6
7
8
9
10
11
12
13

MC.SliderItem = function(img) {

    this.img = img;

    this.originalWidth = img.clientWidth || parseInt(img.getAttribute("width")) || 0;
    this.originalHeight = img.clientHeight || parseInt(img.getAttribute("height")) || 0;

    this.imageWrapper = img.parentNode.parentNode;
    this.item = img.parentNode.parentNode.parentNode;

    this.aligner = img.parentNode.previousSibling;

}

In future releases of the MediaCircle DLC, this fix will be included in the setup package. By the way, this will happen very soon, when we release ADAM 4.5.1 in april.