PDA

Click to See Complete Forum and Search --> : centering a child in the parent window

zbgump
11-12-2003, 04:23 AM
Howdy folks. As this is my first post to this forum let me start by saying hello to all. I've got a couple projects going on right now, and definately more to come; theirs definately a good chance this won't be my last post! :-)

Ok, to get to the point:

The person whos site I'm updating requires a pop-up to open within the center of the parent window. I found this function on another site :

function openCentered (url, width, height) {
if (document.all) {
var x = window.screeLeft;
var y = window.screenTop;
var w = window.document.body.offsetWidth;
var h = window.document.body.offsetHeight;
}
else {
var x = window.screenX;
var y = window.screenY;
var w = window.outerWidth;
var h = window.outerHeight;
}
var cx = x + Math.round((w - width) / 2);
var cy = y + Math.round((h - height) / 2);
return open (url, null, 'left=' + cx + ',top=' + cy + ',width=' +
width + ',height=' + height);
}

This code only works in netscape, as the author stated, but also seems to work in safari. No go on any IE, or Opera... those were all I tried.

I was hoping somebody might have some ideas on how to go about getting this to work on some more (or all) browsers.

Thanks in advance for all you advice!!
Khalid Ali
11-12-2003, 06:31 AM
Here I think it will help you.

http://www.webapplikations.com/pages/html_js/window/OpenCentralizedPopupWindow.html
zbgump
11-12-2003, 06:47 AM
I thank you for the response Khalid!

Unfortunately the script on that page sets the pop-up window to the center of the screen.

I need the pop-up to land in the center of the parent window.

In Safari, it actually pops the window to the center of the top of the screen.

Thank you though!
Khalid Ali
11-12-2003, 06:58 AM
not really a big problem..just get the window co-ordinates and then set the window in center according to those..
zbgump
11-12-2003, 08:35 AM
OK, now I think I'm understanding this a bit better. I fired up VirtualPC(which I should have done to begin with) and tried out the code and realized it's Mac IE 5 thats having the problem. Apparently screenTop/screenLeft only works on WinIE5+, Safari, and Opera 7?

Can anyone advise how I might get to function properly under Mac IE 5?

I also noticed, under WinIE6, that the popup is centered horizontally; vertically the popup top edge is parallel to the parent's top edge. I could live with it, but it would be nice if I could get it working right.

There's at least one typo up there, so heres the code again:

<script>
function openCentered (url, width, height) {
if (document.all) {
var x = window.screenLeft;
var y = window.screenTop;
var w = window.document.body.offsetWidth;
var h = window.document.body.offsetHeight;
}
else {
var x = window.screenX;
var y = window.screenY;
var w = window.outerWidth;
var h = window.outerHeight;
}
var cx = x + Math.round((w - width) / 2);
var cy = y + Math.round((h - height) / 2);
return open (url, null, 'left=' + cx + ',top=' + cy + ',width=' +
width + ',height=' + height);
}
</script>


<input TYPE=BUTTON value="pop" onClick="openCentered('about:blank',320,240)">


Thanks!
zbgump
11-12-2003, 12:23 PM
I've been IM'ing with a friend of mine regarding this perdicament. We concur basically there's no easy way to tell where a MacIE5 window is located on a screen!

He had a thought; if I placed a transparent image, 0x0, on the window somewhere, could I somehow call the xy position of the image in relation to the screen? Then offset my pop window in relation to that?

I honestly have no idea at this point. Just grabbing at straws.. :(
zbgump
11-16-2003, 10:04 PM
OK, I have a solution, its almost there but not quite. I tried capturing the mouse position on the screen as well as the window, to pinpoint a parent window loaction. The problem is the windows are falling a bit low, due to the descrepancy between the viewable area and the entire window.


Heres my code:

<HTML>
<HEAD>
<TITLE>Centered</TITLE>
<script>

document.onmousemove = captureMousePositions;


xPageScreenPos = 0;
yPageScreenPos = 0;

function captureMousePositions(e) {

var browser = navigator.appName;

if (browser == "Microsoft Internet Explorer")



var xMousePagePos = window.event.x;
var yMousePagePos = window.event.y;




var xMouseScreenPos = window.event.screenX;
var yMouseScreenPos = window.event.screenY;

xPageScreenPos = xMouseScreenPos - xMousePagePos;
yPageScreenPos = yMouseScreenPos - yMousePagePos;


}




function openCentered (url, popwin, width, height) {

var browser = navigator.appName;

if (browser == "Microsoft Internet Explorer")

{

var x = xPageScreenPos;
var y = yPageScreenPos;
var w = window.document.body.offsetWidth;
var h = myLayer.offsetHeight;
}



else if(browser == "Netscape")
{

var x = window.screenX;
var y = window.screenY;
var w = window.outerWidth;
var h = window.outerHeight;



}


var cx = x + Math.round((w - width) / 2);
var cy = y + Math.round((h - height) / 2);
var new_win = open (url, null, 'left=' + cx + ',top=' + cy + ',width=' +
width + ',height=' + height);


return

}
</script>







</HEAD>
<BODY bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">




<div position:relative width="758" height="554" id="myLayer" align="center">
<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="758" height="554">
<param name=movie value="movie.swf">
<param name=quality value=high>
<embed src="movie.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="758" height="554">
</embed>
</object> </p>

</div>

</table>
</body>
</html>


The function is called from a button in a flash movie. Anyone have any ideas how to get that pop-up window in the center?

Can I somehow do it by centering the pop-up window in relation to the div layer?

Thanks!