javascript popup window resize

Posted on 2004-11-21
Medium Priority
Last Modified: 2008-02-07
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.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="false">
function resizeWindow(){
      var sizeX = document.getElementById('image').offsetWidth+0;
      var sizeY = document.getElementById('image').offsetHeight+0;
<title>Image Zoom</title>
<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>
document.getElementById('image').onload = resizeWindow;
Question by:qwertq
  • 2
LVL 25

Accepted Solution

devic earned 375 total points
ID: 12640012
LVL 15

Expert Comment

ID: 12640175
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 :-)).

regards JakobA

Author Comment

ID: 12648459
devic, how can i add additional space, say if i wanted a 20 pixel high footer at the bottom.
LVL 25

Expert Comment

ID: 12649978
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 ;)

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question