PDA

View Full Version : How do you find the screen position of a popup moved by the user?


skeatt
09-01-2002, 10:42 AM
I been playing with some code to open PopUps of different sizes for different PortFolio images.
If I used the window "name" when opening new images it would load into the existing PopUp and ignore any new window sizes.
I found the only way to do this was to close the current PopUp (if it was open) and re-open a new window with a new size.

Unfortunately this could be annoying for a user if they have to keep moving it aside to "their" prefered location, so is there a way to test for the PopUp's current screen location so that you can reuse the coordinates for the new window?

Here is some of the code for setting the first window up and testing if one is open. Try moving the PopUp and click links to see what I mean. (A test1.html and test2.html file is also used,also only tested in IE)

<html><head><title>Steven Eatt's PopUp</title>
<script>
<!-- hide me
var winPopUp = null;
function reloadWin(myUrl,popName,W,H,scroll) {
if (winPopUp && !winPopUp.closed) {
winPopUp.close()
PopUp(myUrl,popName,W,H,scroll) }
else {
PopUp(myUrl,popName,W,H,scroll) }}

function PopUp(myUrl,popName,W,H,scroll){
var positionX = (screen.width) ? (screen.width - W)/2 : 0; //Left
var positionY = (screen.height) ? (screen.height - H)/2 : 0; //Top
var features="width="+W+",height="+H+",left="+positionX+
",top="+positionY+",screenX="+positionX+",screenY="+positionY+
",scrollbars="+scroll+",toolbar=0,location=0,directories=0,status=0,menubar=0,resizable=1"
winPopUp=window.open(myUrl,popName,features); //Defined as global, Features also resizable.
winPopUp.focus() // Can exclude this when reloadWin function directly
}

// show me -->
</script>
</head>
<body>
<a href="javascript:reloadWin('test1.html','winName','300','150','0')">Window One</a>
<br><br>
<a href="javascript:reloadWin('test2.html','winName','150','300','0')">Window Two</a>
<br><br><br><br>
<a href="javascript:PopUp('test1.html','winName','300','150','0')">Window One</a>, No window test
<br><br>
<a href="javascript:PopUp('test2.html','winName','150','300','0')">Window Two</a>, No window test

</body>
</html>

Note: features go on one line. Use this for the second windows

<HTML>
<HEAD><Title>PopUp Test</title>
<h2>This is Page One</h2>
</HEAD>
</html>

joh6nn
09-01-2002, 11:32 AM
it's impossible to detect the coordinates of a window on a screen, but you can resize a window, by using:

window.resizeTo(x, y);

so, you don't have to worry about moving the window; you just resize once you've opened it.

skeatt
09-01-2002, 01:57 PM
:thumbsup: I'll have to play with the command... window.resizeTo(x, y); to get a feel for it, but I think I can get it to work using the window's name to direct commands to, then I won't have to close the window if the user has a PopUp open already.
I guess the only problem I could run into is if the new window size pushes it out of the screen limits.

If the user does close the PopUp before clicking a new image, they will have to accept the default position again.:(

adios
09-02-2002, 12:03 AM
http://www.faqts.com/knowledge_base/view.phtml/aid/2310/fid/124 :)

joh6nn
09-02-2002, 12:14 AM
the last i knew, those methods returned the position of the document, not the window. ie, if you have a window at 0,0, and the menubar at the top is 100 pixels tall, and the window border at the left is 4 pixels wide, then the value returned by screenLeft and screenTop would be 4, 100. and because you really can't be sure how sure of the size of the menu bar at the top, you can't figure out where a window is. i don't know, though, maybe things have changed since then. it's been a while since i've played with it.

adios
09-02-2002, 01:39 AM
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var x, y, w = null;

function openme() {
w = open('javascript:"move me!"','','width=200,height=200,status=0');
}

function closeme() {
x = typeof window.screenLeft != 'undefined' ? w.screenLeft : w.screenX;
y = typeof window.screenTop != 'undefined' ? w.screenTop - 22 : w.screenY;
if (w && !w.closed) w.close();
}

function openmetoo() {
w = open('javascript:"here!"','','left='+x+',top='+y+',width=200,height=200');
}

</script>
</head>
<body>
<a href="javascript:void openme()">1) open window</a><br>
2) move window<br>
<a href="javascript:void closeme()">3) close window<br>
<a href="javascript:void openmetoo()">4) open second window</a><br>
</body>
</html>

skeatt
09-03-2002, 03:14 PM
Thankyou adios,

I've learnt a lot from your comments, even changing an if statement to a conditional execute statement was so :cool:

(I can't say I understand the (document.all) statement though)

The "javascript:void closeme()" you used to open another window.:cool: again. I can see myself using that from now on.

I noticed if I executed things out of sink you would either end up with more windows or an error if you tried to close twice, I guess it's a matter of running a few more tests and maybe give the windows names; for more precise destinations, or code in the new window if it was closed from there.

Given it's just gone spring here, and my head it stuffed with pollen, I have to call it a night, (can't think clearly) but there is one part I need explaining to me....
I haven't use conditional statements much and was curious as to what the " typeof " command does (it's purpose) and why the 'undefined' statement in the condition?

x = typeof window.screenLeft != 'undefined' ? w.screenLeft : w.screenX;

I understand it's to determine if the user has NS or IE but wondered how the mechanics work in English. :confused:

joh6nn
09-03-2002, 03:47 PM
x = typeof window.screenLeft != 'undefined' ? w.screenLeft : w.screenX;

condition ? statement true : statement false.

it's an if-then-else statement.

x equals the result of "is window.screenLeft undefinded?" if window.screenLeft is not undefined, then x equals screenLeft. if it is undefined, then x equals w.screenX.

screenLeft is MS, screenX is Netscape.

adios
09-04-2002, 01:13 AM
skeatt...

You're welcome.

The code above was just a demo so, probably can break it pretty easily. The use of typeof (it's an operator) is to see if the particular property is supported in that browser before trying to use it, generally referred to as 'feature-sensing.' Instead of testing for browser version, and using references appropriate to that platform, you see if the actual property is present. There's a good reason for using typeof here; you can do this for properties containing objects:

if (prop) do something...

...although some consider this an error. If you're testing for a non-object property, however, always do it this way:

if (typeof prop != 'undefined') .....

That way, if the property was, say 0, or false, or anything else which evaluated to false, the conditional would still evaluate to true - since it tests whether the property is defined (exists), different from its Boolean value.

http://caucuscare.com/~roth/JAVASCRIPT/ch04_09.htm

skeatt
09-04-2002, 04:14 PM
Your comments have been a great help.

There is one thing that has thrown another stick in the spokes, I loaded up NS 4.79 to test my first post's code to see how it was treated by NS and found a totally different result.

If I used the function...
function PopUp(myUrl,popName,W,H,scroll)

Where IE loaded new content pages into an existing window of the same "popName" and kept the location if the user moved it, but refused to resize the window,

NS seemed to treat them as different windows, closing the original "popName" down and opening a new window with the new content, re-sizing and repositioning it back to the center.

If that sound confusing it's because I am? :confused:

I noticed that I had one to many variable in the "open.( " statement, I don't know why I got "screenX/Y", looks like I've doubled up with a similar feature "left/top". But taking this out seamed to make no difference.

Is this just the nature of the different browsers or some badly coded variables?

I might have to settle for a fixed window size and location until I gain more experience.