This is a pop-up puzzle

[dlowery]

I have a family website, several pages of which display thumbnails of photos. The user can enlarge the image by clicking on a thumbnail (duh!). The enlarged image appears in a pop-up window; size and position are under control, thanks to JS. The USER can EXIT the window (close it) by clicking on the image. This works very well and time is not wasted to re-load the thumbnails after every view.

The problem arises! The thumbnail page, at least a part of it, is always in view. Sometimes the user neglects to close the pop-up, moves the mouse pointer to the parent window and clicks on a new thumbnail. This action loads the new image into the same pop-up and buries the window under the parent. I solved the bury problem with the focus method but I haven't found a way to launch a new pop-up.

What I would like to do, ideally, is close a pop-up if it exists and launch the new pop-up.

What I have tried:
onblur="window.close()";

When pop-up is launched, test for existing window and close it, then launch new window.

Use a unique image ID (this exists) to create a unique windowname variable. This gets very complicated! My experiments failed.

I also experimented with the 'replace' parameter in window.open() but I was in over my head on that one.

There is probably a simple and easy solution but I either don't know how to look for it, or my brain seeks only the complicated answer!

If you have any suggestions, boy wouldn't I love it!!!??

[Ökii]

if you have the sizes are are running them through a function, why not just do a window_name.resizeTo(x,y);
window_name.focus(); sorta thing?

function newwin(url,wid,hei)
{
my_win = window.open(....);
my_win.focus();
my_win.resizeTo(wid,hei);
}

[ez4me2c3d]

replace won't do anything for you.

what you need is something like the following

http://rap.midco.net/ez4me2c3d/html/thumbs/open_thumb.html

[dlowery]

That's a good idea, but size isn't my problem (in this case!!). I just want to make sure a pop-up disappears when a new one is launched.

But thanks for your idea! I have anothe project where that might be useful!!

dlowery

[dlowery]

Anthony! That's exactly what I'm looking for!! I mean --PRECISELY!-- Thank you very much for sharing your knowledge.

Next time you're in LA I'll buy you a beer! :-)

dlowery

[ez4me2c3d]

it might be IE specific, but i'm glad you find it useful.
I don't think i'll ever make it to LA, but I do appreciate the offer. Thank you and you're welcome.

[dlowery]

Hey gang, I really appreciate this forum! While Anthony's solution is excellent in IE, it doesn't work at all in NS. So if you have suggestions for the problem....I can get a whole case of beer!! :-))

The Puzzle: if a child window exists when you launch a new one, the existing one needs to be closed.

dlowery

[glenngv]

if (win && !win.closed) win.close(); //close existing window
win = window.open(...);
win.focus();
...

[dlowery]

Thanks Glenn...and everybody else. I had seen this solution before and could never get it to work. BUT! Perserverance pays. After digging around in reference books and sites I finally thought to look at --variable scope-- and there was the solution.

Those lines of code are within a function. The variable 'win' was declared in the same function was LOCAL and had no 'history' as it were. Consequently the 'win' variable was null and the code took no action. Declaring the variable outside the function made it GLOBAL which allowed it to remember all that I was expecting it to! And now it works.

It looks a little like this:

<script language="JavaScript" type="text/javascript">
<!--
var photoWindow;
function photo_open(link){
if (photoWindow && !photoWindow.closed) photoWindow.close(); //close existing window
photoWindow = window.open('','pixWin','scrollbars=yes,resizable,
width=500,height=590,
left=50,top=30');
.
.
.
.

Thanks again for all your suggestions!

dlowery