...

View Full Version : One new Window with image and resize it



javaPete
03-04-2004, 08:36 PM
I use a popup window script that uses a close() method to reload the new window. Can anyone explain how that is possible?

The script opens a new window with an image then resizes the window to match the image's dimensions. So when when you click on a link it creates a new window and use writeln() methods to write a javascript function in the new window to resize itself. I understand that the resize function (which is triggered by a load event) won't run because the load happens before the script has been written. The line of code that i dont understand uses a close(); method that reloads the window instead of closing it. Here the script:



<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
// Set the horizontal and vertical position for the popup
PositionX = 100; PositionY = 100;
// Set these value approximately 20 pixels greater than the size of the largest image to be used (for Netscape)
defaultWidth = 700; defaultHeight = 700;
// Set autoclose true to have the window close automatically or false to allow multiple popup windows
var AutoClose = true;

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='+Positi onY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;

function popImage(imageURL,imageTitle){ //creates a new window and writes a script in it to resize itself
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){ //shortens imgWin.document.writeln to writeln
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');
writeln('<sc'+'ript>');
writeln('function reSizeToImage(){');
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);}');}
else if(isNN){
writeln('window.innerWidth=document.images["myPic"].width;');
writeln('window.innerHeight=document.images["myPic"].height;}');
}
writeln('function doTitle(){document.title="'+imageTitle+'";}');
writeln('</sc'+'ript>');
writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()"')
if (!AutoClose){writeln('>')}else {writeln(' onblur="self.close()">');}
writeln('<img name="myPic" src='+imageURL+' style="display:block">');
writeln('</body></html>');
close(); //triggers new window to reload running resize script but i'm not sure why it works
}
}
</script>
</head>

<body>
<p><a href="javascript:popImage('image1.jpg','title')">View image1</a></p>
</body>
</html>

Willy Duitt
03-04-2004, 09:15 PM
I just posted this in the Dynamic Drive Script Forum and
perhaps you will find some joy in using this script instead.
(it will open a window to the size of the image)

<script type="text/javascript">
<!--//
function newImg(which){
var theImg = new Image();
theImg.src = which;
var imgw = theImg.width;
var imgh = theImg.height;

if(imgw<100){imgw = 100};
if(imgh<100){imgh = 100};

var ImgWin = window.open('','imgwin',config='height='+imgh+',width='+imgw+',top=0,left=100')
with(ImgWin.document){
writeln('<html><head><title>Display Image</title></head>');
writeln('<body onload="self.focus()" onblur="self.close()">');
writeln('<div style="text-align:center">');
writeln('<img src='+which+'></div>');
writeln('<div style="text-align:center;font-size:9px">');
writeln('<a href="#" onClick="self.close()">Close Me</a>');
writeln('</div></body></html>');
close();
}
}
//-->
</script>
</HEAD>


<a href="dynamicbook1.gif" onclick="newImg(this.href);return false"><img src="dynamicbook1.gif"></a>

.....Willy

javaPete
03-04-2004, 09:29 PM
Willy, nice script looks like it does the job more efficiently.

But you still didn't answer my question why does the close()method reload the new window instead of closing it? I noticed its also in your script.

Roy Sinclair
03-04-2004, 09:58 PM
Close method on the "document' object tells the browser that you've finished writing a new document to the browser and that it's now ok to finish it up. You're confusing that close method with the one for the "window" object which is the one used to close the browser window entirely.

javaPete
03-04-2004, 10:51 PM
thx Roy, ur right. ive been out of javascript for a long time, its kinda of frustrating because just when ive got one language down i get a project in another just cant keep all this crap in my head (asp, asp.net, php, mysql, java, javascript, html, xml, css...)

one more question if you please: should scripts still test for browser ie/nav and version? doesnt over 90% use ie now?

this script doesnt work right in opera 6 (window opens but no code is written to the window). maybe my browser test is to blame. i'll need to relook at it again.

Steveo31
03-05-2004, 12:27 AM
Originally posted by javaPete
one more question if you please: should scripts still test for browser ie/nav and version? doesnt over 90% use ie now?

Eh, more or less. A lot of the people over at Flashkit use mozilla, Opera, Safari, and others. A handful of my friends use moz as well. So maybe 80% ish. I would still try to make the pages as universal as you can

:)

glenngv
03-05-2004, 03:32 AM
Alternative more cross-browser popup image viewer script in my sig.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum