PDA

Click to See Complete Forum and Search --> : Popup pics won't stay in center of screen.

RTR
10-17-2003, 04:37 AM
I'm trying to position the pics, when they pop open, to be in the center of the screen no matter what the resolution. Right now, they are 'left' and 'top' pixel positioned as you can see in the code at each -li- string.
Here's a link to view what I have so far...

LINK (http://home.earthlink.net/~rtrstudio/pospic.htm)

At 800x600 they appear roughly in the center. At 1024x768 they are way off center. Is there a way to achieve this?
Thanks in advance.

-RAY
jslady
10-17-2003, 04:42 AM
try this function. it positions popup windows in the centre of your browser regardless of screen resolution.

function popWin(str_url, str_name, int_width, int_height)
{
var winX = (screen.width - int_width) / 2;
var winY = (screen.height - int_height) / 2;
str_WinParams = 'height=' + int_height +',width=' + int_width + ',top=' + winY+',left=' + winX + ',menubar=0,scrollbars=1,resizable=1,toolbar=0,location=0,status=0';
win = window.open(str_url, str_name, str_WinParams);
}




<a href="#" onclick="popWin('/mysite/mylink.htm','name','650','450')">click here</a>


hope its of use to you.

jslady
RTR
10-17-2003, 11:40 AM
Thank you jslady. I don't quite have it yet though.

I'm opening jpg's each in their own custom sized browser.
So let's say my file is:

http//home.earthlink.net/~rtrstudio/ray2.jpg
(left the colon out so it wouldn't become a link)

Its custom browser that I want it to open in is
height=344 and width=297. The pic itself is 324, 277.

Here's what I've got so far with the code you suggested (and I know it's me).

LINK (http://home.earthlink.net/~rtrstudio/popupcenter.htm)

What am I missing here?

Thank you in advance.

-RAY
jslady
10-20-2003, 03:18 AM
hi ray,

the reason its not working is because "location" in the function is split on two lines ( my fault because thats how i gave it to you). Make sure there are no breaks splitting up a line of code and that the end of each line has a semicolon.

ie:

loc
ation=0,

should be:

location=0,



try that. it should work now.

cheers, jslady.
RTR
10-20-2003, 09:57 AM
Thank you 'jslady'. That was the ticket. They now pop open centered. I did however run into yet another small js snafu within this page.

As you view this link (if you would be so kind),

Example 1 (http://home.earthlink.net/~rtrstudio/example1.htm)

You'll notice the 'click here' link is your code in action.
The 'Ray1' and 'Ray2' links are how I have the page all set up to pop open one pic and then when you click another link the new pic pops open and closes the old pic.

You'll notice that when you click your link (your coded 'click here' link) the pic pops in the center (beautiful!) but changes the original link page into the 'The page cannot be displayed' (or in this case 'earthlink-error-page not found') page in the background of the opened pic. You'll see what I mean. There must be something I can do to prevent that.

Is there a way to incorporate the two scripts to work together so as to fix the 'page not found' situation when your code pops the pic open?

Thank you again for your kindness. I hope to excel in js so that maybe I may help someone here in the future.
Here's a link to the finished page before fixing the "resolution dependant centering problem, if you care to view it.

Starrpics (http://home.earthlink.net/~rtrstudio/Starrpics/encrypt.htm)

-RAY
jslady
10-20-2003, 10:44 AM
Hi ray,

the popup is working fine. You'll find that the error you're speaking of is being caused by the initiate() function on your page. the popup itself is ok.

I've combined the two functions so that popups are centred regardless of screen resolution, and also as you click each link the previous popup will close and the new one will open.

Try out the code below.

Hope its useful to you.

regards,

JsLady


<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
function popWin(str_url, str_name, int_width, int_height)
{
if (self.win != undefined && !self.win.closed) self.win.close();
{
var winX = (screen.width - int_width) / 2;
var winY = (screen.height - int_height) / 2;
str_WinParams = 'height=' + int_height +',width=' + int_width + ',top=' + winY+',left=' + winX + ',menubar=0,scrollbars=0,resizable=0,toolbar=0,location=0,status=0';
win = window.open(str_url, str_name, str_WinParams);
}
}
</script>
</head>

<body>
<a href="#" onclick="popWin('http://home.earthlink.net/~rtrstudio/ray2.jpg','1','297','344')">test 1</a>
<a href="#" onclick="popWin('http://home.earthlink.net/~rtrstudio/ray1.jpg','ray','300','200')">test 2</a>
<a href="#" onclick="popWin('http://home.earthlink.net/~rtrstudio/ray3.jpg','ray2','300','200')">test 3</a>
</BODY>
</HTML>
RTR
10-21-2003, 08:57 PM
Just to let you know 'jslady' it took me quite a bit of messing about in the code but with your help and wonderful insights, it is now all set. Thank you so much again for your generous spirit.

BTW, the "initiate()" function in the BODY tag is needed for the text fade DIV in the center of the page. It seems to be behaving nicely.

Here's the finished page if you care to view it:

Starr Pics (http://home.earthlink.net/~rtrstudio/Starrpics/encrypt.htm)

:D

-RAY
jslady
10-22-2003, 02:40 AM
hi ray,

pleased its working fine. your page is looking good.

keep on rocking.

jsLady.