Высота элемента неизвестна до его визуализации в IE6;как решить? - PullRequest
Новая
       11

Высота элемента неизвестна до его визуализации в IE6;как решить?

1 голос
/ 22 октября 2010

Я создал скрипт лайтбокса.Осталась одна проблема с JavaScript, которая сводит меня с ума.

Источник находится по адресу http://github.com/Wolfr/Wolf-lightbox

В IE6, когда вы щелкаете по изображению, положение модального бокса становится неправильным при первом щелчке по модалу.Если вы закроете его и нажмете еще раз, модал будет расположен правильно.

Я полагаю, это связано с тем, что IE6 еще не знает размеров вставленного изображения.Например, при первом входе в систему modalHeight это может быть что-то вроде 51, в следующий раз - 500 (модал «вырос», так как в нем сейчас изображение »).

У кого-нибудь есть идеи? Застряли здесь!

 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());
  }

 }

Ответы [ 2 ]

3 голосов
/ 22 октября 2010

Вы можете попробовать создать элемент вне экрана (например, position:absolute; left:-10000px), выполнить калибровку смещения, а затем переместить его обратно на экран.

0 голосов
/ 22 октября 2010

Другой вариант - сделать $img.bind("load", ...), чтобы настроить обратный вызов для перерисовки окна при загрузке изображения.Однако IE ведет себя немного странно, когда изображение уже кэшировано, и обратный вызов загрузки никогда не срабатывает.Вам нужно сделать что-то вроде 


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

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