Using window.setTimeout with dynamic parameter

[Randell D.]

HELP!

Its taken me ages - I'm a newbie and I've compiled bits of code that I've
read in this newsgroup over time to create one of my most intricate
functions to date...

Basically, the script gets called with a single arguement (full path to an
image). The image is supposed to be downloaded to the cache, and when
complete, a new window opened that is slightly larger insize then the images
dimensions... The new window will contain the image, and the new window will
be in the middle of the screen...

Nice?

Well... It almost works... in Mozilla, after a handful of refreshes, the
script works as above... In IE6 though, nothing... no errors... no window..
nothing... During development, I used the Javascript Console to help me and
I believe the problem is where I use the window.setTimeout function.
Specifically, when I try to call the parent function and pass it the image
path, and the use (or overuse?) of quotes...

Can someone help straighten it out as I am proud of it and I think somebody
out there (other than myself) will actually get some use out of this once
its fully working...

The script is below... along with my HTML <img onClick> tag (with newlines
to make it more readable)....

<script type='text/javascript'>
function imageInNewWindow(imgsrc)
{ // Display the image in a new window that is centered in the middle of the
screen
var oImg = new Image();
oImg.src = imgsrc;

var newWinWidth=(oImg.width*1.09);
var newWinHeight=(oImg.height*1.09);
var winX = (screen.width-oImg.width)/2;
var winY = (screen.height-oImg.height)/2;
if (oImg.complete) {
window.open(imgsrc,"myWindowName");
// I remarked the following two lines in case it might be part of the
problem - I think its fine though...

//,"height="+newWinHeight+",width="+newWinWidth+",top="+winY+",left="+winX+"
");
//,menubar=no,resizeable=no,toolbar=0,location=0,scrollbars=0");
return true;
}
window.setTimeout("imageInNewWindow('"+imgsrc+"')", 1000);
return true;
}
</script>

<img src=http://www.myDomain.com/tKnitting-35.jpg
border=0
onClick="imageInNewWindow('http://www.myDomain.com/tKnitting-35.jpg');
return false">

 

[Richard Cornford]

Basically, the script gets called with a single arguement
(full path to an image). The image is supposed to be downloaded
to the cache, and when complete,
a new window opened that is slightly larger insize then the
images dimensions...

Assuming that you know how big the image is, and that the browser can
(or is willing to) open new windows.

The new window will contain the image,
and the new window will be in the middle of the screen...

The centre of the screen is not always the best place to put a new
window (assuming it can be opened in the first place). On multi-monitor
set ups that might be across a screen boundary or on a completely
different screen to the browser (which might not be where the user is
looking). Then there are MDI inter4face browsers, like Opera, where
positioning based on screen dimensions is meaningless and will often
result in a window that if partly, or fully, off the MDI main window (so
obscured or out of sight).

Nice?

No, the reliability (particularly in the face of pop-up blocking
mechanisms) and the chances that the sizing and positioning attempts
will backfire suggest that an alternative approach might be more
productive.

Last time this script (it is quite a popular concept for a script) was
proposed I knocked together a demonstration of an alternative approach
using DHTML:-

<URL:
http://www.litotes.demon.co.uk/example_scripts/inWindowPopUp.html >

Well... It almost works... in Mozilla, after a handful of refreshes,
the script works as above...

That is a definition of "works"?

In IE6 though, nothing... no errors... no window.. nothing...
During development, I used the Javascript Console to help me and
I believe the problem is where I use the window.setTimeout function.
Specifically, when I try to call the parent function and pass it
the image path, and the use (or overuse?) of quotes...

Can someone help straighten it out as I am proud of it and I think
somebody out there (other than myself) will actually get some use
out of this once its fully working...

The script is below... along with my HTML <img onClick> tag
(with newlines to make it more readable)....

<script type='text/javascript'>
function imageInNewWindow(imgsrc)
{ // Display the image in a new window that is centered in the
//middle of the screen
var oImg = new Image();
oImg.src = imgsrc;

var newWinWidth=(oImg.width*1.09);

There is little chance that the Image object will have the width
property set to a value relating to the size of the image in the image
file at this point. Some browsers never set the width/height of the
image from the dimensions in the image file even when it is loaded (and
others have dummy Image constructors and will not even load the image as
a result of this code).

var newWinHeight=(oImg.height*1.09);
var winX = (screen.width-oImg.width)/2;
var winY = (screen.height-oImg.height)/2;

If you insist on positioning based on screen dimensions then use the
availWidth and availHeight properties of the screen object instead as
they (sometimes) take taskbars and the like into account.

if (oImg.complete) {

The complete property is not a reliable indicator that an Image has
finished downloading . Your IE problem is probably due to this property
being true prior to the Image object knowing the size of the image (IE
does read the image size from the file, one it arrives). Using the
image's onload event is more reliable (but not totally).

window.open(imgsrc,"myWindowName");
// I remarked the following two lines in case it might be
// part of the problem - I think its fine though...

//,"height="+newWinHeight+",width="+newWinWidth+",top="+winY+
//",left="+winX+"
");

Was that quote closing parenthesis and semicolon intended to be at the
end of the preceding line? (You control the margins of your newsreader
and the insertion of whitespace (line feed/carriage return pairs) into
you code, there is no reason to present your code broken across lines in
a way that renders it erroneous).

//,menubar=no,resizeable=no,toolbar=0,location=0,scrollbars=0");

In order to justify setting the resizable feature of a pop-up window to
no you need to be certain that you have got the size right on every
browser that will open the pop-up (Your script does not even come close
to doing that). As the sizing controls don't significantly effect the
appearance of a window there isn't a good reason for ever rendering a
window non-resizable, if you get the size right the user will not
attempt to change it and if you get it wrong they will be annoyed that
they can't.

Also, (all else being equal) once you set any of the features for a new
window (such as the size) all remaining window features default to off
so there is only a need to mention features in the list that you want
on.

return true;
}
window.setTimeout("imageInNewWindow('"+imgsrc+"')", 1000);

If the following image URL is representative the quoting in this
setTimeout looks correct.

onClick="imageInNewWindow('http://www.myDomain.com/tKnitting-35.jpg');
return false">

Richard.

 

[Randell D.]

Assuming that you know how big the image is, and that the browser can
(or is willing to) open new windows.


The centre of the screen is not always the best place to put a new
window (assuming it can be opened in the first place). On multi-monitor
set ups that might be across a screen boundary or on a completely
different screen to the browser (which might not be where the user is
looking). Then there are MDI inter4face browsers, like Opera, where
positioning based on screen dimensions is meaningless and will often
result in a window that if partly, or fully, off the MDI main window (so
obscured or out of sight).


No, the reliability (particularly in the face of pop-up blocking
mechanisms) and the chances that the sizing and positioning attempts
will backfire suggest that an alternative approach might be more
productive.

Last time this script (it is quite a popular concept for a script) was
proposed I knocked together a demonstration of an alternative approach
using DHTML:-

<URL:
http://www.litotes.demon.co.uk/example_scripts/inWindowPopUp.html >



That is a definition of "works"?


There is little chance that the Image object will have the width
property set to a value relating to the size of the image in the image
file at this point. Some browsers never set the width/height of the
image from the dimensions in the image file even when it is loaded (and
others have dummy Image constructors and will not even load the image as
a result of this code).


If you insist on positioning based on screen dimensions then use the
availWidth and availHeight properties of the screen object instead as
they (sometimes) take taskbars and the like into account.


The complete property is not a reliable indicator that an Image has
finished downloading . Your IE problem is probably due to this property
being true prior to the Image object knowing the size of the image (IE
does read the image size from the file, one it arrives). Using the
image's onload event is more reliable (but not totally).


Was that quote closing parenthesis and semicolon intended to be at the
end of the preceding line? (You control the margins of your newsreader
and the insertion of whitespace (line feed/carriage return pairs) into
you code, there is no reason to present your code broken across lines in
a way that renders it erroneous).


In order to justify setting the resizable feature of a pop-up window to
no you need to be certain that you have got the size right on every
browser that will open the pop-up (Your script does not even come close
to doing that). As the sizing controls don't significantly effect the
appearance of a window there isn't a good reason for ever rendering a
window non-resizable, if you get the size right the user will not
attempt to change it and if you get it wrong they will be annoyed that
they can't.

Also, (all else being equal) once you set any of the features for a new
window (such as the size) all remaining window features default to off
so there is only a need to mention features in the list that you want
on.


If the following image URL is representative the quoting in this
setTimeout looks correct.



Richard.

Thanks for the help.... I think... I know your criticism is constructive...
but you've managed to burst my bubble... 8( I was really pleased with what I
had accomplished...

You've given alot of food for thought there... I'll return to the drawing
board...

Cheers
Randell D.