jQuery open new window centered with fixed size

Question

Possible Duplicate:
Center a popup window on screen?

I have 4 different links, all of which need to open a new window which will target 4 different html files.

When the links are clicked, it needs to open the html file in question in a new window, both:

• Centered
• Fixed size 900 x 600

I have found this below, but it doesnt seem to cater for centering of the window

http://jquerybyexample.blogspot.com/2012/05/open-link-in-new-tab-or-new-popup.html

Cheers

Solution

To center the new window, give it a left and top value half of the screen size - half of the window size :

var left  = ($(window).width()/2)-(900/2),
    top   = ($(window).height()/2)-(600/2),
    popup = window.open ("", "popup", "width=900, height=600, top="+top+", left="+left);

FIDDLE

Comments

[Jay Blanchard]

Read this - nigraphic.com/blog/java-script/…

[John]

thanks guys worked prefectly

[Tony M]

I've posted a dual monitor solution over on the duplicate question for those who are looking for something a little more robust like I was -> stackoverflow.com/a/16861050/1483871. Credit: xtf.dk

[Alex Sorokoletov]

$(window).width() is a width of browser window, not a screen width. To center window on screen correctly (which current code does not - you can try the fiddle and resize the window with fiddle and see how it goes) use screen object stackoverflow.com/a/3437825/883738

[adeneo]

@AlexSorokoletov - One generally uses the window for things like this, not screen, but that depends on what you're after, the OP was looking for the window, and you just downvoted this answer based on the fact that you were looking for the screen. Both approaches has issues, especially screen as it's not very consistent, and if you have multiple screens it always returns the size of the primary screen and not the screen you're currently working on etc.

[Alex Sorokoletov]

Well, in this case the window that is opened is still not centered within the parent window. Just resize it and move up to right. Just saying...

[Rajshekar Reddy]

Hi Mate!!! the FIDDLE is no more working. Can you please update it.

[adeneo]

@Reddy - seems like jsFiddle deleted it, I've updated now, thanks !

[Jargs]

@AlexSorokoletov is correct. The original question was about centering the window. OP doesn't say anything about centering on the parent window. Either way, this answer does not center it on the screen, and only centers on the parent window if the parent window happens to be in the top left corner of the screen. You'd need to use screen for centering on the screen. Or, to center on the parent, you'd have to add the values for window.screenX and window.screenY and then use window.outerWidth and window.outerHeight instead of $(window).width() and $(window).height().

[Jargs]

Updated JSFiddle

[adeneo]

@Jeff - The OP doesn't specify wether it should center in the browser window or on the screen, I understood the question as being about the former. To center on the screen you'd use the window.screen properties instead, and you're right, it doesn't account for offset if the browser is not in the top left corner, nor does it account for multiple screen setups, certain devices, and probably a bunch of other things, but this was what I came up with four and half year ago.

[Jargs]

@adeneo I'm sorry if I offended. I know some of the things I did 4 years ago would baffle me now, so I certainly didn't mean to imply anything about your understanding. I was simply commenting for the sake of accuracy for anyone who stumbles across this selected answer from a Google search, since even 4+ year old Stack Overflow questions serve as a knowledgebase for many programmers. I thought about just updating the original answer instead, but didn't want to step on any toes.

[adeneo]

@Jeff - no offense taken. I won't bother updating the answer, as it is in fact a duplicate, and the other question has answers that account for both the screen, multiple monitors, and more.