CODEWITHSUNDEEP
javascripthtml
Don P
Don P

Reputation: 63667

Open a frame in center of current window

How can I open a frame in the center of the current window?

The JS is simple: 

window.open("http://www.google.com", "activate-frame", "height=600,width=800,centerscreen,chrome=yes");

However the "centerscreen" attribute is not actually opening the frame in the center of the screen.

JSFiddle: http://jsfiddle.net/ecm9bpox/1/

Upvotes: 0

Views: 4310

Answers (3)

Dimitar Atanasov
Dimitar Atanasov

Reputation: 169

To show new popup window at the center of the parent one use its properties screenTop, screenLeft, innerHeight and innerWidth to calculate the center point and then pass it to window.open.

Here's working example:

var opts = {
    url: "https://example.com",  // Popup URL here
    width: 600,                  // Popup width here
    height: 600                  // Popup height here
};
var parentCenter = {
    top: window.screenTop + (window.innerHeight / 2),
    left: window.screenLeft + (window.innerWidth / 2)
};
var offset = {
    top: parentCenter.top - (opts.height / 2),
    left: parentCenter.left - (opts.width / 2)
};  
window.open(opts.url, 'mywindow', 'width=' + opts.width + ',height=' + opts.height + ',top='+offset.top+',left=' + offset.left);

Upvotes: 1

Rick S
Rick S

Reputation: 6586

It's not clear, but according to the Mozilla documentation it may only work with chrome scripts.

var win = window.open("chrome://myextension/content/about.xul", "aboutMyExtension", "chrome,centerscreen");

The first parameter to window.open is the URI of the XUL file that describes the window and its contents.

https://developer.mozilla.org/en-US/docs/Working_with_windows_in_chrome_code

Upvotes: 1

CreMedian
CreMedian

Reputation: 803

You have to calculate the screen width and height before placing the window on the screen.

Something like this:

function popupwindow(url, title, w, h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 

popupwindow('http://google.com','Test Frame',600, 800)

As answered here, in a similar Stack Overflow post.

Upvotes: 1

Related Questions