Javascript Popup/Image Width issue

The following javascript resizes a popup browser to the size of the image displayed in the browser. It has worked fine in IE6 and other browsers, but in IE7 it causes the width to be much too small, cutting off the image in the popup.

It appears that IE7 is treating "document.body.clientWidth-document.images[0].width" differently than in IE6. Anyone know how to easily remedy this

Here's the script....

// Set the horizontal and vertical position for the popup

PositionX = 5;
PositionY = 5;

// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)

defaultWidth = 720;
defaultHeight = 520;

// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows

var AutoClose = false;

// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape") 1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1) 1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');
writeln('<META HTTP-EQUIV="imagetoolbar" CONTENT="no">');
writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape") 1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1) 1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();
}}
</script>

HTML output ends up looking like this...

<html>
<head>
<title>Loading...</title>
<style>body{margin:0px;}</style>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

<script>
var isNN,isIE;
if (parseInt(navigator.appVersion.charAt(0))>=4){
isNN=(navigator.appName=="Netscape") 1:0;
isIE=(navigator.appName.indexOf("Microsoft")!=-1) 1:0;}
function reSizeToImage(){
if (isIE){
window.resizeTo(100,100);
width=100-(document.body.clientWidth-document.images[0].width);
height=100-(document.body.clientHeight-document.images[0].height);
window.resizeTo(width,height);}
if (isNN){
window.innerWidth=document.images["George"].width;
window.innerHeight=document.images["George"].height;}}
function doTitle(){document.title="TheDomain.com";}
</script>

</head>

<body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">
<img name="George" src=theimage.jpg style="display:block"></body></html>

Answer this question