SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot choazart's Avatar
    Join Date
    Feb 2002
    Location
    So. California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Javascript newbie - how to center a pop up window

    Hello all,

    After trying unsuccesfully, I can't find a script or tutorial on popping up a new window that is positioned in the center of the screen. There is a post in the javascript forum but I'm not sure I understand it. Is there anyone who can provide me with a reference to a script that is easy to understand and implement? BTW- I tried that extension in the Dreamweaver exchange and found it to be a dud. Has anyone had any luck with this extension?

    Thank you all in advance for your help!

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Birmingham, UK
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    reply:

    hey there, i have got a script like this on my homepage. The way that you position a pop-up or anything for that matter is to give it left and top coordinates.

    :code:
    <SCRIPT LANGUAGE="JavaScript">
    function window(){
    //open the window,giving it names,dimentions etc etc
    msg=window.open("location.htm","name","height=150,width=150,left=65,top=185");
    }
    //run the script when the page is loaded.
    window.onload = window
    </Script>
    you may wish to centre it due to what resolution the user has... you can do this by using the commands..
    screen.width
    and
    screen.height

    theory behind this is, the centre is half of those to values

    :code:
    <SCRIPT LANGUAGE="JavaScript">
    function window(){
    //get the centre
    var width = screen.width/2
    var height = screen.height/2
    //open the window,giving it names,dimentions etc etc
    msg=window.open("location.htm","name","height="+height+",width="+width+",left=65,top=185");
    }
    //run the script when the page is loaded.
    window.onload = window
    </Script>

    hope i helped

  3. #3
    SitePoint Zealot choazart's Avatar
    Join Date
    Feb 2002
    Location
    So. California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Both scripts or just the second?

    Do you use the second script or, do you put both in the head of the document? If you use the second, would you place a "body onload" in the <body> tag?

    Again, thanks for your time!

    Mike


  4. #4
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can rig it up with css. I tend to prefer this method to javascript. (which is funny cause I love coding in javascript)...

    .object{
    margin-top:10%;
    margin-left:15%
    }

    depending on the size of the centered object that could get you just abot there. Play with the numbers.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Birmingham, UK
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use either script, the second script just puts it smack bang in the centre of the screen regardless to the resolution. Neah you dont have to have the onLoad"" in the <body> tag, thats what the window.onLoad command does in the javascript

  6. #6
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also use this

    <HEAD>
    <script language="javascript" type="text/javascript">

    var win = null;
    function NewWindow(mypage,myname,w,h,scroll){
    LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
    TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
    settings =
    'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
    win = window.open(mypage,myname,settings)
    if(win.window.focus){win.window.focus();}
    }

    </script>
    </head>

    <a href="your link here" onclick="NewWindow(this.href,'name','400','400','yes');return false"</a>

    This will pop the window in the centre of any screen resolution, and you can specify the size of the window.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •