9

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

Community
  • 1
  • 1
John
  • 1,777
  • 9
  • 42
  • 66
  • Read this - http://www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen – Jay Blanchard Nov 07 '12 at 14:53
  • thanks guys worked prefectly – John Nov 07 '12 at 15:12
  • 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 -> http://stackoverflow.com/a/16861050/1483871. Credit: http://www.xtf.dk – Tony M Jun 06 '13 at 19:38

1 Answers1

20

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

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • 1
    $(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 http://stackoverflow.com/a/3437825/883738 – Alex Sorokoletov Jun 12 '14 at 16:06
  • @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. – adeneo Jun 12 '14 at 16:42
  • 1
    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... – Alex Sorokoletov Jun 12 '14 at 18:08
  • Hi Mate!!! the FIDDLE is no more working. Can you please update it. – Rajshekar Reddy Jun 15 '15 at 11:11
  • 1
    @Reddy - seems like jsFiddle deleted it, I've updated now, thanks ! – adeneo Jun 15 '15 at 12:57
  • @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 Apr 04 '17 at 18:21
  • [Updated JSFiddle](https://jsfiddle.net/6xzv7ob2/41/) – Jargs Apr 04 '17 at 18:22
  • @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. – adeneo Apr 04 '17 at 18:54
  • @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. – Jargs Apr 04 '17 at 22:43
  • @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. – adeneo Apr 05 '17 at 04:59