How to force pop up to open centered?

S

swmasson

New Member
Hi there,

I'm trying to open up a link in the center of the screen but i'm not sure how to edit the below code to work...

Basically the windo opes at the correct height and width as a pop up, i just need it centered in the screen...

Any help would be massively appreciated...

Thank you

Regards

SWM

function showDialog(URL, width, height)
{id = window.open(URL, "" " location=no,statusbar=yes,status=yes,scrollbars=yes,menubar=no,toolbar=no,directories=no,resizable=yes,width=" + width + ",height=" + height);
}
 
jnjc

jnjc

New Member
You will have to write a small piece of JS to calculate the center position of the window and then pass those parameters to the open command. I did a quick search on it and came up with the following from http://www.irt.org/script/1316.htm

Code: 
var w = 480, h = 340;

if (document.all || document.layers) {
   w = screen.availWidth;
   h = screen.availHeight;
}

var popW = 300, popH = 200;

var leftPos = (w-popW)/2, topPos = (h-popH)/2;

window.open('page,html','popup','width=' + popW + ',height=' + popH + ',top=' + topPos + ',left=' + leftPos);

I haven't tested this but it looks right.

HTH,
JC
 
S

swmasson

New Member
Thanks very much for the reply, however, the script i am using will have to keep the same coding, i can only edit the coding that i pasted above... Can i merge the two bits of code to get it to work?

I'm no expert so i probably wont be able to merge them.... eek


Thanks again for your help

Regards

SWM
 
jnjc

jnjc

New Member
change the function "showDialog" to the following (again I haven't tested this but it should work or at least get you started):


Code: 
showDialog(URL, width, height)
{

var w = 800, h = 600;

if (document.all || document.layers) {
   w = screen.availWidth;
   h = screen.availHeight;
}

var leftPos = (w-width)/2, topPos = (h-height)/2;

id = window.open(URL, "" " location=no,statusbar=yes,status=yes,scrollbars=ye s,menubar=no,toolbar=no,directories=no,resizable=y es,width=" + width + ",height=" + height + ',top=' + topPos + ',left=' + leftPos);
}
 
S

swmasson

New Member
Thanks for that but unfortunatly it didnt work, it wont open the link and comes up with an error message... eek!

Thanks, any other ideas?

Regards

SWM
 
jnjc

jnjc

New Member
I should have tested it before I posted it, try this and let me know how it goes:

Code: 
function showDialog(URL, width, height)
{
var w = screen.availWidth;
var h = screen.availHeight;

var leftPos = (w-width)/2, topPos = (h-height)/2;

id = window.open(URL,"_blank","location=no,statusbar=yes,status=yes,scrollbars=yes,menubar=no,toolbar=no,directories=no,resizable=yes,width=" + width + ",height=" + height + ',top=' + topPos + ',left=' + leftPos);
}
 
S

swmasson

New Member
Thanks very much for that, your a total legend!!! it works perfectly and its saved me a lot of trouble!!

Regards

steve
 
S

swmasson

New Member
jnjc,

i got another pop up problem... this one is much simpler, however, i cant seem to get it to work...

I'm using this code:-

Code: 
<script type="text/javascript">
<!--
function popup(url) 
{
 var width  = 880;
 var height = 680;
 var left   = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;
 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=yes';
 params += ', scrollbars=yes';
 params += ', status=yes';
 params += ', toolbar=no';
 newwin=window.open(url,'contactus', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>
<a href="javascript: void(0)" onClick="popup('/support/index.php?_m=tickets&_a=submit')"><img name="tab_contactus" src="images/branding/tab_contact-us.png" border="0" id="tab_contactus" alt="Contact us" /></a>

I mean it opens up a pop up in the center, but the height and width never change even after i edit the px??? very annoying!

Do you think you know what i'm doing wrong?

Thanks again

Regards

SWM
 
jnjc

jnjc

New Member
I have tested the code and it works for me. I've tried the width at a number of settings and it seems fine. Can you post a URL ? One thing to watch for with popup windows, make sure you close the window after you use it. If you have a popup window hanging around in background the browser will re-use it under certain circumstances.

Let me know how you go...
 
S

swmasson

New Member
thanks for the reply, you can visit the website by clicking here, however, its not live yet and still has work ongoing:-

Try clicking on the support tab, contact us tab oo the FAQ tab to see what i mean....

Thanks

Steve
 
jnjc

jnjc

New Member
Your problem here is because the popup function is defined multiply times within your page, if you view your page source you'll see what I mean. Think of functions like variables if you define it multiply times it'll have the value of the last time the browser reads it. The following example will demonstrate:

Code: 
<script type="text/javascript">
function hellothere() {
  alert("1");
}

function hellothere() {
  alert("2");
}

hellothere();
</script>

So even if you change the values in one of the popup function definitions, that won't necessarily be the one that is executed.

You will probable need to change things so that you can pass the height and width as in your showDialog function. You should also remove the multiply instances of popup, it'll only slow your page load.

HTH,
JC
 
S

swmasson

New Member
Thanks again for that but i'm not sure how i can fix that... will it really slow my page down?

Is it possible to change the name to help it know which window properties to use?

Thanks

SWM
 
jnjc

jnjc

New Member
To be honest it probably won't slow you page down to any great extent (as in you probably won't notice it). You main problem is that as things stand you won't be able to control the size of the window. What you need to do is make the following changes to your JS and your html:

Code: 
<script type="text/javascript">
<!--
function popup(url,[B]width,height[/B]) 
{
 var left   = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;
 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=yes';
 params += ', scrollbars=yes';
 params += ', status=yes';
 params += ', toolbar=no';
 newwin=window.open(url,'contactus', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>
<a href="javascript: void(0)" onClick="popup('/support/index.php?_m=tickets&_a=submit',[B]400,500[/B])"><img name="tab_contactus" src="images/branding/tab_contact-us.png" border="0" id="tab_contactus" alt="Contact us" /></a>


This will allow you to specify a width for each popup.

HTH,
JC
 
jnjc

jnjc

New Member
Can you post a link for me to check it out ? Remember if you are adding the width and height as parameters you will need to change it on all instances of the popup function.
 
jnjc

jnjc

New Member
I have looked at those links and nothing has changed ? There is no changes to either the popup function or the link ?

Did you try and make the changes to the popup function ?
 
jnjc

jnjc

New Member
IF you want me to check out why they didn't work then you will have to either put them back or put together a test URL
 
S

swmasson

New Member
ok, thank... i created a basic html file with only the code in it and it worked fine, however, when i place the code into the online tempplate it opend up in a incorrect size?

Do you understand what could be causing this?

Thanks

Regards

SWM
 
You must log in or register to reply here.
Top