window.open

**mscir** · Jul 20 '05, 02:42 PM

Re: window.open

Phillip Parr wrote:[color=blue]
> Hello, I have a nice system where someone clicks on a picture to show the
> full version. This pops up in a window.open box. It works great, the only
> problem is that if the user clicks a second picture before closing the first
> then the new picture loads into the original popup box which is often a
> different size. How can i make them open in their own popup windows?[/color]

I do the same thing with this script, I send the size of the image and
the image name to this function. It opens a unique window each time it
is called (at least in IE6, NN7.1), centering it on the screen. If this
approach doesn't work for you post the code you're using, or the url of
your page.

I add 'images/' to the image name in the function so I didn't have to
write the folder name where images are located in each function call.
winl and wint center it on the screen. You can modify any of the
settings easily. I haven't validated this code but so far it seems to
work all right.

function show(pic,w,h) {
pic = 'images/' + pic;
var someImage = new Image();
someImage.src = pic;
var winl = (screen.width-w)/2;
var wint = (screen.height-h-30)/2;
var settings = 'height='+h+',' ;
settings += 'width='+w+',';
settings += 'top='+wint+',' ;
settings += 'left='+winl+', ';
settings += 'scrollbars=no, ';
settings += 'resizable=no,' ;
settings += 'toolbar=no,';
settings += 'directories=no ,';
settings += 'menubar=no,';
settings += 'status=no,';
settings += 'resizable=no,' ;
settings += 'alwaysRaised=t rue';
var new1 = window.open('', '',settings);
if (!new1.opener) new1.opener = self;
var someImage = new Image();
someImage.src = pic;
new1.document.w rite('<html>');
new1.document.w rite('<head>');
new1.document.w rite("<title>Pu t Your Title Text Here</title>");
new1.document.w rite('<style type="text/css">');
new1.document.w rite(' body { margin: 0; }');
new1.document.w rite(' img { border:0; cursor:pointer; cursor:hand;}') ;
new1.document.w rite('</style>');
new1.document.w rite('</head>');
new1.document.w rite(' ');
new1.document.w rite('<body onclick="window .close();">');
new1.document.w rite('<img src="' + pic + '" title="Click to Close
this Window">');
new1.document.w rite("</body>");
new1.document.w rite("</html>");
new1.document.c lose();
}

DU · Jul 20 '05, 02:43 PM

Re: window.open

mscir wrote:
[color=blue]
> Phillip Parr wrote:
>[color=green]
>> Hello, I have a nice system where someone clicks on a picture to show the
>> full version. This pops up in a window.open box. It works great, the only
>> problem is that if the user clicks a second picture before closing the
>> first
>> then the new picture loads into the original popup box which is often a
>> different size. How can i make them open in their own popup windows?[/color]
>
>
> I do the same thing with this script, I send the size of the image and
> the image name to this function. It opens a unique window each time it
> is called (at least in IE6, NN7.1), centering it on the screen. If this
> approach doesn't work for you post the code you're using, or the url of
> your page.
>
> I add 'images/' to the image name in the function so I didn't have to
> write the folder name where images are located in each function call.
> winl and wint center it on the screen. You can modify any of the
> settings easily. I haven't validated this code but so far it seems to
> work all right.
>
> function show(pic,w,h) {
> pic = 'images/' + pic;
> var someImage = new Image();
> someImage.src = pic;[/color]

Rather than the 2 assignments above and 1 object creation which uses
considerably more memory and cpu, why not just pass the uri of the image
as a parameter. That way you definitively will do a much more efficient
usage of the user's system resources.
[color=blue]
> var winl = (screen.width-w)/2;
> var wint = (screen.height-h-30)/2;[/color]

Instead of guessing that the user's taskbar is 30 pixels high, why not
use screen.availHei ght instead which will be much more reliable and also
faster. Same thing with winl: some users have semi-permanent
os-dependent applications (like Office quick launch bar) which will
reduce the screen.availWid th value. But you're not querying that value
here. Your code could be more accurate, more reliable than it is.

[color=blue]
> var settings = 'height='+h+',' ;
> settings += 'width='+w+',';
> settings += 'top='+wint+',' ;
> settings += 'left='+winl+', ';
> settings += 'scrollbars=no, ';
> settings += 'resizable=no,' ;[/color]

If you are sure of your calculations, then why not make the popup window
resizable... just in case, just as a fallback alternative. If you're
sure of your calculations, then there is nothing wrong with considering
the Murphy's law. If something is wrong with the size of the popup, then
your code will not annoy the user.
[color=blue]
> settings += 'toolbar=no,';
> settings += 'directories=no ,';
> settings += 'menubar=no,';
> settings += 'status=no,';[/color]

What's the reason for removing the statusbar?
[color=blue]
> settings += 'resizable=no,' ;[/color]

Twice.
[color=blue]
> settings += 'alwaysRaised=t rue';[/color]

alwaysRaised is not supported on MSIE and not supported on NS 6+ either.
It was supported by NS 4.x for signed scripts only.

In the above code, you did 12 assignments (appending strings). Instead,
you could have done all of the above with only 1 assignment and with
only the windowFeatures which were turned on.

var settings = "height=" + h+ ",width=" + w + ",top=" + wint + ",left="
+ winl + ",resizable,sta tus";

"If windowName does not specify an existing window and you do not supply
the windowFeatures parameter, all of the features which have a yes/no
choice are yes by default. However, if you do supply the windowFeatures
parameter, then the titlebar and hotkeys are still yes by default, but
the other features which have a yes/no choice are no by default."

http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/window.html#1202731

"When the sFeatures parameter is specified, the features that are not
defined in the parameter are disabled. Therefore, when using the
sFeatures parameter, it is necessary to enable all the features that
are to be included in the new window."

Microsoft Learn: Build with answers in reach

http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/open_0.asp

Find official documentation, practical know-how, and expert guidance for builders working and troubleshooting in Microsoft products.

[color=blue]
> var new1 = window.open('', '',settings);[/color]

[color=blue]
> if (!new1.opener) new1.opener = self;[/color]

Can you explain that instruction? It really looks weird to me and
definitively not needed.
[color=blue]
> var someImage = new Image();
> someImage.src = pic;[/color]

5 assignment instructions on that image when simply passing the uri in
the parameter was sufficient.
[color=blue]
> new1.document.w rite('<html>');
> new1.document.w rite('<head>');
> new1.document.w rite("<title>Pu t Your Title Text Here</title>");
> new1.document.w rite('<style type="text/css">');
> new1.document.w rite(' body { margin: 0; }');
> new1.document.w rite(' img { border:0; cursor:pointer; cursor:hand;}') ;[/color]

Why that declaration? The default css declaration for <img> on all
browsers is border:0 and cursor: hand/pointer anyway.
[color=blue]
> new1.document.w rite('</style>');
> new1.document.w rite('</head>');
> new1.document.w rite(' ');
> new1.document.w rite('<body onclick="window .close();">');
> new1.document.w rite('<img src="' + pic + '" title="Click to Close this
> Window">');
> new1.document.w rite("</body>");
> new1.document.w rite("</html>");[/color]

You're constructing a whole document by using 13 consecutive write calls
when you only need to render an image in a popup. This is abusing the
user's system resources. On top of all this, you're not escaping the
forward slashes, so you'll get validation errors on that.
Your code is also illogical, incoherent: if you're looking to remove all
chrome (and you can not force that anyway thanks to user.js and user
prefs in Mozilla-based browsers while proxomitron can neutralize your
code for MSIE users: so, many of your calculations will be wrong: see my
comment about Murphy's law), then you should not create a whole HTML
document. Just the URI of the image would suffice.
[color=blue]
> new1.document.c lose();
> }
>[/color]

Your code will not bring back on top the requested popup in case the
popup goes behind the opener, which is known to be a very common problem
with popups. Again, an usability burden and a problem not addressed by
your code.

Here's how I do all this:

Opening enlarged images of different dimensions into a single new
separate window only one at a time

IIS 7.5 Detailed Error - 404.0 - Not Found

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/EnlargeThumbnail.html

DU

**Phillip Parr** · Jul 20 '05, 02:44 PM

Re: window.open

Hey, thanks for all your replies. Like the idea of only one window open at
once, very nice. But for the purposes I'm using I need more than one to be
allowed open. I did however solve my problem. I'm using PHP to generate the
script and simply gave each of the clickable thumbnails the same title for
the popup window. Changing it so they all have a different title now works!

Phil

"DU" <drunclear@hotW IPETHISmail.com > wrote in message
news:c180st$8jj $1@news.eusc.in ter.net...[color=blue]
> mscir wrote:
>[color=green]
> > Phillip Parr wrote:
> >[color=darkred]
> >> Hello, I have a nice system where someone clicks on a picture to show[/color][/color][/color]
the[color=blue][color=green][color=darkred]
> >> full version. This pops up in a window.open box. It works great, the[/color][/color][/color]
only[color=blue][color=green][color=darkred]
> >> problem is that if the user clicks a second picture before closing the
> >> first
> >> then the new picture loads into the original popup box which is often a
> >> different size. How can i make them open in their own popup windows?[/color]
> >
> >
> > I do the same thing with this script, I send the size of the image and
> > the image name to this function. It opens a unique window each time it
> > is called (at least in IE6, NN7.1), centering it on the screen. If this
> > approach doesn't work for you post the code you're using, or the url of
> > your page.
> >
> > I add 'images/' to the image name in the function so I didn't have to
> > write the folder name where images are located in each function call.
> > winl and wint center it on the screen. You can modify any of the
> > settings easily. I haven't validated this code but so far it seems to
> > work all right.
> >
> > function show(pic,w,h) {
> > pic = 'images/' + pic;
> > var someImage = new Image();
> > someImage.src = pic;[/color]
>
> Rather than the 2 assignments above and 1 object creation which uses
> considerably more memory and cpu, why not just pass the uri of the image
> as a parameter. That way you definitively will do a much more efficient
> usage of the user's system resources.
>[color=green]
> > var winl = (screen.width-w)/2;
> > var wint = (screen.height-h-30)/2;[/color]
>
> Instead of guessing that the user's taskbar is 30 pixels high, why not
> use screen.availHei ght instead which will be much more reliable and also
> faster. Same thing with winl: some users have semi-permanent
> os-dependent applications (like Office quick launch bar) which will
> reduce the screen.availWid th value. But you're not querying that value
> here. Your code could be more accurate, more reliable than it is.
>
>[color=green]
> > var settings = 'height='+h+',' ;
> > settings += 'width='+w+',';
> > settings += 'top='+wint+',' ;
> > settings += 'left='+winl+', ';
> > settings += 'scrollbars=no, ';
> > settings += 'resizable=no,' ;[/color]
>
> If you are sure of your calculations, then why not make the popup window
> resizable... just in case, just as a fallback alternative. If you're
> sure of your calculations, then there is nothing wrong with considering
> the Murphy's law. If something is wrong with the size of the popup, then
> your code will not annoy the user.
>[color=green]
> > settings += 'toolbar=no,';
> > settings += 'directories=no ,';
> > settings += 'menubar=no,';
> > settings += 'status=no,';[/color]
>
> What's the reason for removing the statusbar?
>[color=green]
> > settings += 'resizable=no,' ;[/color]
>
> Twice.
>[color=green]
> > settings += 'alwaysRaised=t rue';[/color]
>
> alwaysRaised is not supported on MSIE and not supported on NS 6+ either.
> It was supported by NS 4.x for signed scripts only.
>
> In the above code, you did 12 assignments (appending strings). Instead,
> you could have done all of the above with only 1 assignment and with
> only the windowFeatures which were turned on.
>
> var settings = "height=" + h+ ",width=" + w + ",top=" + wint + ",left="
> + winl + ",resizable,sta tus";
>
>
> "If windowName does not specify an existing window and you do not supply
> the windowFeatures parameter, all of the features which have a yes/no
> choice are yes by default. However, if you do supply the windowFeatures
> parameter, then the titlebar and hotkeys are still yes by default, but
> the other features which have a yes/no choice are no by default."
>[/color]
http://devedge.netscape.com/library/...w.html#1202731[color=blue]
>
> "When the sFeatures parameter is specified, the features that are not
> defined in the parameter are disabled. Therefore, when using the
> sFeatures parameter, it is necessary to enable all the features that
> are to be included in the new window."
>[/color]
http://msdn.microsoft.com/workshop/a...ods/open_0.asp[color=blue]
>
>[color=green]
> > var new1 = window.open('', '',settings);[/color]
>
>
>[color=green]
> > if (!new1.opener) new1.opener = self;[/color]
>
> Can you explain that instruction? It really looks weird to me and
> definitively not needed.
>[color=green]
> > var someImage = new Image();
> > someImage.src = pic;[/color]
>
> 5 assignment instructions on that image when simply passing the uri in
> the parameter was sufficient.
>[color=green]
> > new1.document.w rite('<html>');
> > new1.document.w rite('<head>');
> > new1.document.w rite("<title>Pu t Your Title Text Here</title>");
> > new1.document.w rite('<style type="text/css">');
> > new1.document.w rite(' body { margin: 0; }');
> > new1.document.w rite(' img { border:0; cursor:pointer;[/color][/color]
cursor:hand;}') ;[color=blue]
>
> Why that declaration? The default css declaration for <img> on all
> browsers is border:0 and cursor: hand/pointer anyway.
>[color=green]
> > new1.document.w rite('</style>');
> > new1.document.w rite('</head>');
> > new1.document.w rite(' ');
> > new1.document.w rite('<body onclick="window .close();">');
> > new1.document.w rite('<img src="' + pic + '" title="Click to Close this
> > Window">');
> > new1.document.w rite("</body>");
> > new1.document.w rite("</html>");[/color]
>
> You're constructing a whole document by using 13 consecutive write calls
> when you only need to render an image in a popup. This is abusing the
> user's system resources. On top of all this, you're not escaping the
> forward slashes, so you'll get validation errors on that.
> Your code is also illogical, incoherent: if you're looking to remove all
> chrome (and you can not force that anyway thanks to user.js and user
> prefs in Mozilla-based browsers while proxomitron can neutralize your
> code for MSIE users: so, many of your calculations will be wrong: see my
> comment about Murphy's law), then you should not create a whole HTML
> document. Just the URI of the image would suffice.
>[color=green]
> > new1.document.c lose();
> > }
> >[/color]
>
> Your code will not bring back on top the requested popup in case the
> popup goes behind the opener, which is known to be a very common problem
> with popups. Again, an usability burden and a problem not addressed by
> your code.
>
> Here's how I do all this:
>
> Opening enlarged images of different dimensions into a single new
> separate window only one at a time
>[/color]
http://www10.brinkster.com/doctorunc...Thumbnail.html[color=blue]
>
> DU[/color]

**mscir** · Jul 20 '05, 02:44 PM

Re: window.open

DU wrote:[color=blue]
> mscir wrote:
>[color=green]
>> Phillip Parr wrote:[/color][/color]

Phillip,

you raised many good points. I got the code from a website and modified
it for my own use, I didn't understand all of it but when it worked in
IE6 and NN7 I left in lines I wasn't sure about. I'll clean it up using
your suggestions.

Thanks,
Mike

window.open

window.open

Comment

Comment

Comment

Comment