javascript popup window resize

i want to dynamically set the size of the popup window based on the image's size that its displaying. i have a working model at http://www.louiswalch.com/test/ but the problem is its not resizing it correctly. (the lines with arrow tips show the image size)

i have pasted my code below for zoom.php

also, i want to know if this will work on macs, and old browsers.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="false">
<script>
function resizeWindow(){
      document.getElementById('loading').style.display='none';
      document.getElementById('image').style.visibility='visible';
      var sizeX = document.getElementById('image').offsetWidth+0;
      var sizeY = document.getElementById('image').offsetHeight+0;
      self.resizeTo(sizeX,sizeY);
}
</script>
<title>Image Zoom</title>
</head>
<body onload="resizeWindow();" style="margin: 0px 0px 0px 0px; text-align: center; font: normal 10px verdana; color: #666; background: #fff;">
<div id="loading" style="display: block;">LOADING</div>
<a href="javascript:self.close();" onmousedown="self.close();"><img id="image" style="visibility: hidden; padding: 0px; border: 0px solid #FFC8AD;" src="<?php echo $image ?>" alt="Click to close window" border="0"></a>
<script>
document.getElementById('image').onload = resizeWindow;
</script>
</body>
</html>
qwertqAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

devicCommented:
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JakobACommented:
Awoid using the resizeTO function. The different browsermakers implement it differently, some saying the outer dimentions of the browser should have that size, some sayint the displayarea inside the window should be set to that size.

Supress scroll bars in that window. A scrollbar makes the window some 12-15 pixels smaller, and again browsermakers disagree on how that should be handeled.

Here is my version  ( NB: its old. I did not consider scrollbars :-)).
  http://hjem.get2net.dk/Jakob.Aggernaes/temp/exp56245.html

regards JakobA
0
qwertqAuthor Commented:
devic, how can i add additional space, say if i wanted a 20 pixel high footer at the bottom.
0
devicCommented:
iHeight = document.images[0].height - iHeight;
change to:
iHeight = document.images[0].height - iHeight+40;

document.write( "<img src='" + picUrl + "' border=0>" );
change to:
document.write( "<img src='" + picUrl + "' border=0 vspace=20>" );


qwertq , as you see is not difficult, don't afraid to experiment, this is a good way to understand what is what ;)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.