Autosized pop-up window: retired
	Updated: 31 Mar 2009

09 Dec 2008: I'm leaving this page up for history. I'm replacing this code on the sites I run with Slimbox.

You click on a thumbnail picture on some site. If a new browser window opens, sometimes it's too small, sometimes it's too big. On the sites I run, I've found a better way. Read on.

The code in JavaScript

Near the top of the code in most pages on this site is a call to an external JavaScript file. One of the functions has to do with making a pop-up window that conforms to the size of the PICTURE being loaded. A picture has a fixed height and width, so we can do this with pictures.

Anyway, here's the code

 

function viewPic(img)
{ 	
    picfile = new Image(); 
    picfile.src =(img); 
    fileCheck(img); 
}

 

function fileCheck(img)
{ 	
    if( (picfile.width!=0) && (picfile.height!=0) )
    { 
        makeWindow(img); 
    }
    else 
    {
        funzione="fileCheck('"+img+"')"; 
        intervallo=setTimeout(funzione,50); 
    }
}

 

function makeWindow(img)
{ 	
    ht = picfile.height + 20;
    wd = picfile.width + 20; 

    var args= "height=" + ht + ",innerHeight=" + ht;
    args += ",width=" + wd + ",innerWidth=" + wd;
    if (window.screen) 
    { 
        var avht = screen.availHeight; 
        var avwd = screen.availWidth;
        var xcen = (avwd - wd) / 2; 
        var ycen = (avht - ht) / 2;
        args += ",left=" + xcen + ",screenX=" + xcen;
        args += ",top=" + ycen + ",screenY=" + ycen + ",resizable=yes"; 	
    }
    return window.open(img, '', args); 
} 

What the makeWindow function does

Here's where the fun begins. Still using img, we know that it exists and has a height and width. Set variable wd (width) to the width of the picture plus 20 (pixels) to give a little room on the side. Set variable ht (height) to picture height plus 20. This will make it line up nicely in the new window (at least for IE and Firefox browsers) with a bit of white space around the image.

Assign args (arguments, or parameters) for height, innerHeight, width, and innerWidth. These all have to do with the dimensions of the window we want to pop up.

If "window.screen" is true (meaning, the machine detects that the viewer is using a browser that is compatible with Microsoft Internet Explorer version 4+), we can also center the window. The program checks the dimensions of the user's screen, accounting for the space used at the top and bottom of the browser for menus and status, finds the center, and feeds in the parameters (args) for where to make the window appear.

The last line opens a new window with img as the content, '' for the name, and the args for dimensions and window options (in this case, we want to let the user resize the window if they want). Other options (address bar, scrollbars, etc.) would just get in the way and distract from the lovely picture.

The code in HTML

OK, back to my simple version. Now, here's how to call the Javascript from the Web page.

<script type="text/javascript" language="JavaScript" src="../scriptfile.js"></script>

<a href="images/bigfile.jpg" target="_blank" onClick="viewPic(this.href); return false">
<img src="thumbs/smallfile.jpg" width="60" height="75" alt="Description here.">
</a>

What this does

The first chunk, which is on most pages on this Web site, makes the JavaScript code in the external file "scriptfile" available to this page.

The parts of the second chunk are explained further below.

href	load some file (bigfile.jpg in the subfolder images)
target	_blank means to put it in a new browser window
onClick	When the thing inside the A (anchor) tag is clicked, do something called viewPic using the href in "this" tag ... (aha, the picture file); the return false bit basically means (I think) don't come back here because control will pass to the new window
img	The img (smallfile.jpg in the subfolder thumbs) is inside the A tag. The picture has settings for width, height, and "alt" - if you hover the mouse over the picture, this text will pop-up; if the picture isn't viewable, this text will appear in its place.

 

The source material

I don't have years of programming experience. Didn't come up with this on my own. Got a little help from elsewhere. Two places mainly:

http://javascript.internet.com/page-details/auto-resizable-pop-up.html
Author: Andrea Ferrari

Original code is here: digilander.libero.it/ferrariand/gallery.htm

View the source - ever seen JavaScript in Italiano?

. . . and . . .

 

Doc JavaScript (Yehuda Shiran and Tomer Shiran)

www.webreference.com/js

 

Your feedback is most welcome. Would you like to send me email?

Original page posted: February 18, 2003 • Links tested: May 31, 2009 • Last tweaked: April 8, 2009
 
The address for this page is [ www.therotunda.net/code/autosized-popup-window.html ]
 
Nothing on my Web site is the official publication of anyone else. Unauthorized use for profit is not permitted.