Multiple Popups focus problem

[RexJ]

Hello,

I have a page with several puzzles. I want the user to be able to
click on a puzzle and the solution will come up in a popup. That part
works fine. My problem is that if the user clicks on a second
solution the first popup goes behind the main screen. I want the
popups to remain on top of the main screen until they are closed or
minimized by the user.

Here is the code I'm using:

<a href="ViperGrey.html" onclick="window.open
('ViperGrey.html','popViper','left=650,top=200,width=580,height=400,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no');
return false">

I am not using a function because each screen has different
dimensions.

RexJ

 

[SAM]

Le 9/4/09 1:55 AM, RexJ a écrit :

Hello,

I have a page with several puzzles. I want the user to be able to
click on a puzzle and the solution will come up in a popup. That part
works fine. My problem is that if the user clicks on a second
solution the first popup goes behind the main screen. I want the
popups to remain on top of the main screen until they are closed or
minimized by the user.

Here is the code I'm using:

<a href="ViperGrey.html" onclick="window.open
('ViperGrey.html','popViper','left=650,top=200,width=580,height=400,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no');
return false">

I am not using a function because each screen has different dimensions.

And then ?

function pop(what, w, h) {
truc = window.open(what.href,'truc','width='+w+',height='+h+
'left='+(screen.width-w)/2+',resizable=1,scrollbars=1');
truc.onload = function() { truc.focus(); }
return false;
}


<a href="ViperGrey.html" onclick="return pop(this,580,400);">
Grey Viper</a>

The html is much more simple in this way, no?

RexJ

With your way :

<a href="ViperGrey.html"
onclick="foo=window.open('ViperGrey.html','popViper','left=650,top=200,width=580,height=400,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no');
foo.focus();return false">

 

[Thomas 'PointedEars' Lahn]

I have a page with several puzzles. I want the user to be able to
click on a puzzle and the solution will come up in a popup. That part
works fine. My problem is that if the user clicks on a second
solution the first popup goes behind the main screen. I want the
popups to remain on top of the main screen until they are closed or
minimized by the user.

No, you do _not_ want that. Think about it. It is _not_ *your* desktop,
and users will not take kindly on your trying to take over control.

However, what can be done if the user's settings allow it, is to reuse the
popup window and focus it when it has finished loading. See below for a
possible solution.

Here is the code I'm using:

<a href="ViperGrey.html" onclick="window.open
('ViperGrey.html','popViper','left=650,top=200,width=580,height=400,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no');
return false">

You would not want to unconditionally return `false' here. What if a popup
blocker is in place?

I am not using a function because each screen has different dimensions.

That is exactly why you should use a function/method. Probably the
window.open() calls only differ in their `width' and `height' options (you
should not use the `left' and `top' options, because you would assume that
the virtual desktop is at least 1230×600 pixels large; and even then,
because it is only a *virtual* desktop, the window may not fit the physical
screen.)

By using a function, you can make your windows (if windows are created, and
not tabs) look uniform except of their dimensions, and reduce the complexity
of the call in the event-handler attribute, thereby avoiding spaghetti code.
Consider this:

<script type="text/javascript">
function popup(uri, target, options)
{
/* Add feature tests here */

return window.open(
uri,
target || "p" + (new Date()).getTime(),
'scrollbars=no,resizable=no'
+ ',toolbar=no,directories=no,location=no,'
+ 'menubar=no,status=no'
+ (options ? "," + options : ""));
}
</script>

<a href="ViperGrey.html"
onclick="return !popup(this.href, 'popViper','width=580,height=400')">

In ViperGrey.html:

<body onload="window.focus()">

Your further window.open() options (`scrollbars=no' etc.) are problematic,
too. Please read <https://developer.mozilla.org/en/DOM/window.open> in
order to avoid the most common blunders and accessibility issues when using
window.open().


PointedEars

 

[SAM]

Le 9/4/09 10:04 AM, Thomas 'PointedEars' Lahn a écrit :

You would not want to unconditionally return `false' here. What if a popup
blocker is in place?

a clever blocker would have to accept a popup called this way (by user's
action)
Anyway : you have the right-click ... !

Consider this:

<script type="text/javascript">

The code you have given was not so bad ;-)

Please read <https://developer.mozilla.org/en/DOM/window.open>

Absolutely.

 

[RexJ]

Le 9/4/09 10:04 AM, Thomas 'PointedEars' Lahn a écrit :



a clever blocker would have to accept a popup called this way (by user's
action)
Anyway : you have the right-click ... !



The code you have given was not so bad ;-)


Absolutely.

Thanks for your replies. I have tried both but neither do what I
want.

Currently, here is my code

JS----

<SCRIPT LANGUAGE="JavaScript">
<!--

function pop(what, w, h) {
truc = window.open(what.href,'truc','width='+w+',height='+h+
'left='+(screen.width-w)/2+',resizable=1,scrollbars=1');
truc.onload = function() { truc.focus(); }
return false;
}

function popup(uri, target, options)
{
/* Add feature tests here */

return window.open(
uri,
target || "p" + (new Date()).getTime(),
'scrollbars=no,resizable=no'
+ ',toolbar=no,directories=no,location=no,'
+ 'menubar=no,status=no'
+ (options ? "," + options : ""));
}

//--->
</SCRIPT>

HTML-----
<a href="PalaminoGrey.html"
onclick="return !popup(this.href,
'popViper','width=450,height=450')">

<img src="./images/Palamino12tiles.jpg" width="365" height="379"
style="margin-right:5px; margin-left:20px;margin-bottom:10" BORDER=0>
</a>


<a href="PalaviperGrey.html"
onclick="return !popup(this.href,
'popViper','width=580,height=400')">

<img src="./images/Palaviper14tiles.jpg" width="365" height="236"
style="margin-right:5px; margin-left:20px;margin-bottom:10" BORDER=0>
</a>

---------

This code (and SAM's) both open a window 450x450 when you click on the
Palamino. Then if you click on the viper it doesn't open a separate
window but just puts the viper solution into a 450x450 window (which
isn't big enough).

What I need is separate (different sized) windows that all open on top
on the main screen. By not using a function I can open multiple
windows but only the first window is on top. And this is what we
want, we have tested this and the people who look at the puzzles seem
to want to have multiple solutions open. When solutions go to the
back they get confused.

Here is the actual link http://www.playpalago.com/CreaturePuzzles.html

The first two use a function, the rest are individually coded.

thanks,

RexJ

 

[SAM]

Le 9/7/09 1:25 AM, RexJ a écrit :

What I need is separate (different sized) windows that all open on top
on the main screen.

You can't have more one window on top (foreground).
The other popups may be over the main window but they will not have the
focus.

Maybe you can instert in files of each popup:

<script type="text/javascript">
function onTop() {
if (opener && self.blur) self.focus();
}
setTimeout('onTop()',500);
</script>

But ... you'll never be abble to play on the mother window all long
popups are opened.

By not using a function I can open multiple
windows but only the first window is on top. And this is what we
want, we have tested this and the people who look at the puzzles seem
to want to have multiple solutions open. When solutions go to the
back they get confused.

Here is the actual link http://www.playpalago.com/CreaturePuzzles.html

Ho !? In fact, you want a popup comming ovver the main window with a new
image on each click on examples ?


<script type="text/javascript">
function pop(what, w, h) {
it(typeof truc != 'undefined' && !truc.closed) truc.close();
truc = window.open(what.href,'truc','width='+w+',height='+h+
'left='+(screen.width-w)/2+',resizable=1,scrollbars=1');
truc.onload = function() { truc.focus(); }
return false;
}
</script>

HTML :
======
<a href="PalaviperGrey.html" onclick="return pop(this.href,580,400)">

<a href="PalasnapperGrey.html" onclick="return pop(this.href,440,460)">

 

[SAM]

Le 9/7/09 12:12 PM, SAM a écrit :

HTML :
======
<a href="PalaviperGrey.html" onclick="return pop(this.href,580,400)">

<a href="PalasnapperGrey.html" onclick="return pop(this.href,440,460)">

Correction :

<a href="PalaviperGrey.html" onclick="return pop(this,580,400)">

<a href="PalasnapperGrey.html" onclick="return pop(this,440,460)">


Sorry