JavaScript invalid argument error with IE8

Question

IE8 is giving me an invalid argument error at character 9 of the last statement in this loop (Character 9 is the first letter of the icon variable.):

var JOB_STATUS_ICON_DISTANCE = 125;
var JOB_STATUS_ICON = {};
var center = parseInt($('#job-status-window').css('width')) / 2;
var jobStatusIcons = ['A', 'B', 'C', 'D', 'E'];

for (var i=0; i<jobStatusIcons.length; i++) {
    var name = jobStatusIcons[i];
    var icon = document.getElementById('job-status-' + name);
    var width = icon.naturalWidth;
    var centerPoint = (center-(width/2));

    JOB_STATUS_ICON[name+'Center'] = centerPoint;
    JOB_STATUS_ICON[name+'Left']   = centerPoint - JOB_STATUS_ICON_DISTANCE;
    JOB_STATUS_ICON[name+'Right']  = centerPoint + JOB_STATUS_ICON_DISTANCE;
    JOB_STATUS_ICON[name] = $('#job-status-'+name);

    icon.style.left = JOB_STATUS_ICON[name+'Right'] + 'px';  // error here...
}

Can anyone tell me why? This works fine in modern browsers.

Just for some context, this is for monitoring the status of a job in progress (5 steps). I'm keeping track of the positions of 5 images in JOB_STATUS_ICONS. Each image slides in from the right to the center position, stays there while that part of the job is processing, then slides out to the left. The code above is just some optimization for establishing the left, center and right position of each image (they're all different widths).

The last line in the loop, which causes the problem, is setting the initial position of the image.

Answer 1

This is probably being caused by the fact that IE8 doesn't support the naturalWidth property from which your centerPoint is being calculated.

var width = icon.naturalWidth;
var centerPoint = (center-(width/2));

Here's a short piece of Javascript written by Jack Moore that simulates naturalWidth in IElt8

function getNatural (DOMelement) {
    var img = new Image();
    img.src = DOMelement.src;
    return {width: img.width, height: img.height};
  }

Source: http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/