How to force pop up to open centered?

Discussion in 'Programming' started by swmasson, Aug 6, 2008.

to remove all ads.
  1. swmasson

    swmasson New Member

    Messages:
    17
    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);
    }
     
  2. jnjc

    jnjc New Member

    Messages:
    493
    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
     
  3. swmasson

    swmasson New Member

    Messages:
    17
    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
     
  4. jnjc

    jnjc New Member

    Messages:
    493
    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);
    } 
     
  5. swmasson

    swmasson New Member

    Messages:
    17
    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
     
  6. jnjc

    jnjc New Member

    Messages:
    493
    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);
    }
     
  7. swmasson

    swmasson New Member

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

    Regards

    steve
     
  8. swmasson

    swmasson New Member

    Messages:
    17
    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
     
  9. jnjc

    jnjc New Member

    Messages:
    493
    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...
     
  10. swmasson

    swmasson New Member

    Messages:
    17
    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
     
  11. jnjc

    jnjc New Member

    Messages:
    493
    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
     
  12. swmasson

    swmasson New Member

    Messages:
    17
    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
     
  13. jnjc

    jnjc New Member

    Messages:
    493
    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
     
  14. swmasson

    swmasson New Member

    Messages:
    17
    Thanks for that, however, it didnt seem to work for me :(

    Regards

    SWM
     
  15. jnjc

    jnjc New Member

    Messages:
    493
    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.
     
  16. swmasson

    swmasson New Member

    Messages:
    17
    click here to access the page, the three links are the support tab, FAQ tab & the contact us tab...


    Thanks again

    SWM
     
  17. jnjc

    jnjc New Member

    Messages:
    493
    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 ?
     
  18. swmasson

    swmasson New Member

    Messages:
    17
    I tried the changes but they didnt work... so i changed them back to before...

    Thanks

    SWM
     
  19. jnjc

    jnjc New Member

    Messages:
    493
    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
     
  20. swmasson

    swmasson New Member

    Messages:
    17
    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
     

Share This Page