IE6 horizontal centering

[imanov]

Hello,

I’m using BlockUI plug-in for showing custom Ajax loading images and simple dialogs in one of our ASP.NET applications.

Unfortunately we still have to support IE6 and I had some problems with horizontal centering of the popup dialogs in IE6 when there is a horizontal scroll. There was also a problem with the top positioning when resizing the window under IE6.

When the overlay is shown, it covers only the visible area, but if I scroll horizontally, it does not stretch. Also when I resize the window after an element has been blocked, top position is not recalculated.

I made a simple patch to the IE positioning part of the latest version of Block UI plug-in :

// simulate fixed position $.each([lyr1, lyr2, lyr3], function(i, o) { var s = o[0].style; s.position = 'absolute'; if (i < 2) { full ? s.setExpression('height', 'Math.max(document.body.scrollHeight, document.body.offsetHeight) - (jQuery.boxModel?0:' + opts.quirksmodeOffsetHack + ') + "px"') : s.setExpression('height', 'this.parentNode.offsetHeight + "px"'); full ? s.setExpression('width', 'jQuery.boxModel && document.documentElement.scrollWidth || document.body.scrollWidth + "px"') : s.setExpression('width', 'this.parentNode.scrollWidth + "px"'); if (fixL) s.setExpression('left', fixL); if (fixT) s.setExpression('top', fixT); } else { if (opts.centerY) { if (full) { s.setExpression('top', '(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"'); } else { s.setExpression('top', '(this.parentNode.offsetHeight) / 2 + (blah = this.parentNode.scrollTop) + "px"'); } s.marginTop = 0; } else if (!opts.centerY && full) { var top = (opts.css && opts.css.top) ? parseInt(opts.css.top) : 0; var expression = '((document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + ' + top + ') + "px"'; s.setExpression('top', expression); }

if (opts.centerX) {
    if (full) {
        s.setExpression('left', '(document.documentElement.clientWidth || document.body.clientWidth) / 2 + (blah = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"');
    }
    else {
        s.setExpression('left', '(this.parentNode.scrollWidth) / 2 + (blah = this.parentNode.scrollLeft) + "px"');
    }
    //s.marginLeft = 0;
}
else if (!opts.centerX && full) {
    var left = (opts.css && opts.css.left) ? parseInt(opts.css.left) : 0;
    var expressionL = '((document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + ' + left + ') + "px"';
    s.setExpression('left', expressionL);
}

}

I use scrollWidth instead of client width, added left calculation according to centerX and top expression in case of element blocking. All these seem to work fine in our case, but I’m not sure if I know all gaps when working with IE6.

This solved the problem for me under IE6, but I'm not sure that covers all cases that can occur with WIDTH calculation when "simulating fixed position".

Can you tell me if this change is OK and hopefully include it in some of the new versions, so I don't have to patch it by hand on every update.

Best regards Ivan