Element height unknown before it's rendered in IE6; how to solve?

Question

I created a lightbox script. One javascript issue remains and it is driving me crazy.

The source is to be found at http://github.com/Wolfr/Wolf-lightbox

In IE6, when you click the image, the modal box position is wrong the first time you click the modal. If you close it and click it again, the modal is positioned correctly.

I believe this is due to IE6 not knowing the dimensions of the inserted image yet. E.g. the first time you log modalHeight it might be something like 51, the next time 500 (the modal has "grown" since there is an image in it now").

Anyone has any ideas? Stuck here!

 function positionBox() {

  // initialize object references
  var oElement = $('.modal');
  var oWindow = $(window);

  // calculate offset
  var offsetLeft = parseInt((oWindow.width() - oElement.width()) / 2);
  var offsetTop = parseInt((oWindow.height() - oElement.height()) / 2);

  var modalWidth = parseInt(oElement.width());
  var modalHeight = parseInt(oElement.height());

  oElement.css('left', offsetLeft)
    .css('top', offsetTop)
    .css('width', modalWidth)
    .css('height', modalHeight)
    .css('position', 'fixed');

  // IE6 should use position: absolute; since fixed is not supported
  if($.browser.msie && $.browser.version =='6.0') {
   oElement.css('position', 'absolute')
           .css('top', offsetTop + oWindow.scrollTop());
  }

 }

Answer 1

You can try creating the element you want sized off-screen (ie. position:absolute; left:-10000px), do your offset calcs and then move it back on screen.

Answer 2

Another option is to do a $img.bind("load", ...) to set up a callback to redraw the window when the image loads. However, IE behaves a bit weirdly when the image is already cached, and the load callback never fires. You need to do something like

$img.bind("load", function () {
  redraw();
});

if ($.browser.msie) {
  if ($img[0].complete) {
    redraw();
  }
}