Thickbox in quirks mode

I recently was doing some upgrades on a site that was built by a previous company. The site in question was not built with standards in mind and displays in quirks mode. The site looks fine in most browsers and although not the best idea, I have been making updates to work in quirks mode. As you might have guessed I wanted to incorporate the Jquery library, Thickbox for image viewing. The only problem is that when you view an image while scrolled down on a page the Thickbox image shows at the top of the page. You have to scroll up in order to see the image. This only happens in IE and only when viewing a page in quirks mode.

I took a little time to figure out what exactly the problem was. It turns out that if you specify a top margin while in IE and quirks mode the browser interprets that margin from the top of the page and not the top of the display window. So if you specify a top margin of 100px the window will be placed 100px from the literal top of the page and not the top of where you have scrolled to. To fix this we just add a few lines into the Thickbox code to check for IE and quirks mode. They are as follows.

if (jQuery.browser.msie && document.compatMode=="BackCompat"){ }
 else{
 $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
 }

I added this in the function tb_position() around line 282. You should see the $(‘#TB_window’) line. This is what adds the top margin to the box. I have added a simple if statement that checks to see if the browser is Microsoft IE and if the document is in BackCompat (Quirks) mode. If these are true then I just have a blank statement but you could add something if you need. The else statement just has the line which is already in the Thickbox code. That is all you need to do. Compress your code if you wish, I used javascriptcompressor.com.

This is my whole tb_position function.

function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
 if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
 if (jQuery.browser.msie && document.compatMode=="BackCompat"){ }
 else{
 $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
 }
 }
}

After taking a look at the Thickbox web page I noticed that it is not being maintained and I am sorry to hear that. So add these few lines of code if you already implement it and need quirks mode compatibility.