I am trying to open a window from a click then after the response in the url that consist of a confirmation page if is success it will close the window.
I opened my window with this:
url = 'http:/mywebsite/index';
width = 545;
height = 433;
var leftPosition, topPosition;
//Allow for borders.
leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
//Allow for title and status bars.
topPosition = (window.screen.height / 2) - ((height / 2) + 50);
//Open the window.
window.open(url, "Window2", "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");
The returned of the URL http:/mywebsite/index is a json dump with a dictionary of success whether true or false. I code this with python btw.
The problem I am encountering is how to close the window from the return of the python.
I tried returning a string as HTML and javascript consisting of window.close(). But no luck. Please do tell me if I am doing something wrong or what should be the method.
Thanks.
You need to store the object returned by window.open and call close() on that object:
var mywindow;
mywindow = window.open(...);
...
mywindow.close();
I have a number of social media site links which i would like to parse through a popup box. Here is an example of one of those links:
<li>
<a class="sprite_reddit" href="http://www.reddit.com/submit" onclick="window.open('http://www.reddit.com/submit?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'reddit','toolbar=no,width=840,height=750'); return false;"></a>
</li>
Rather than include window.open in the html I would like this link to parse through the following javascript which centers the popup box in the screen.
function MyPopUpWin(url, width, height) {
var leftPosition, topPosition;
//Allow for borders.
leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
//Allow for title and status bars.
topPosition = (window.screen.height / 2) - ((height / 2) + 50);
//Open the window.
window.open(url, "Window2", "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");
}
What do I need to change in order to achieve this or is it not possible with this kind of link?
Thanks heaps.
The open function is supported in every major browser version but not every browser supports all the parameters you have set. Some like screenX and Y are no longer supported I guess.
Checkout this link for more information:
http://www.w3schools.com/jsref/met_win_open.asp
I am wondering which one is the right one to run the js code which calculates the height of vertical menu depending on the window height and sets it on time, not late, not early.
I am using document.ready but it is not really helping me with the issue, it is not setting sometimes, I have to reload the page, then it is working, but not on the first load.
How to solve this problem?
Here is my code:
$(document).ready(function(){
var winh = document.body.clientHeight;
var footer = document.getElementById('footer').offsetHeight;
document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
document.getElementById('sidebar').style.marginBottom = footer + 'px';
$(window).resize(function(){
var winh = document.body.clientHeight;
var footer = document.getElementById('footer').offsetHeight;
document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
document.getElementById('sidebar').style.marginBottom = footer + 'px';
});
});
ready
When you run code when the document is ready, it means the DOM is loaded - but not things like images. If images will affect the height and width and the image tag has no width and height set, ready isn't the choice for you - otherwise it probably is.
onload
This includes images - so everything will be loaded. This means it fires a bit later.
both
var calculateSize = function () {
var winh = document.body.clientHeight;
var footer = document.getElementById('footer').offsetHeight;
document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
document.getElementById('sidebar').style.marginBottom = footer + 'px';
}
$(document).ready(function(){
calculateSize();
$(window).resize(calculateSize);
});
window.onload = calculateSize ;
How do I get the browser window height so I can find the center position?
I only need the window height, not the web page height.
I tried $(window).height() / 2 but it only works if the browser has focus from the top of the page. If I scroll down I get the wrong center.
To get the y value of the center of the current viewable area, use:
$(window).scrollTop() + $(window).height() / 2
I tried it on this page, by opening up the Web Inspector and entering:
$('<p>').text('test').appendTo('body').css({position: 'absolute', top: $(window).scrollTop() + $(window).height() / 2});
I think that the body's height needs to be in brackets for it to work properly:
var center = $("body").scrollTop() + ($("body").height() / 2);
However, if you're making a popup dialog, it's better to detect if the user is not on a mobile device then use the CSS "position: fixed". You detect for mobile devices because Mobile Safari doesn't understand fixed positioning in iOS versions before 5. Use this code for the detection:
var isMobile = navigator.appVersion.indexOf("Mobile/") != -1;
Ad#m
Try window.outerHeight and window.outerWidth, which works in FF5 (and possibly earlier versions) and Chrome, but not in IE9. From googling it seems that this bit of info is not easy to get by in IE.
Also see this other question dealing with IE.
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="' + src + '" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var w = 700;
var h = 600;
var leftCenter = window.innerWidth / 2;
var leftWindowMargin = leftCenter - (w / 2);
var topCenter = window.innerHeight / 2;
var topWindowMargin = topCenter - (h / 2);
var win = window.open("", "", "width=" + w + ",height=" + h + ",resizable=no,top=" + topWindowMargin + ",left=" + leftWindowMargin + ";");
win.document.write(iframe);
Scenario:
The user has two monitors.
Their browser is open on the secondary monitor.
They click a link in the browser which calls window.open() with a specific top and left window offset.
The popup window always opens on their primary monitor.
Is there any way in JavaScript to get the popup window to open on the same monitor as the initial browser window (the opener)?
You can't specify the monitor, but you can specify the position of the popup window as being relative to the where the click caused the window to popup.
Use the getMouseXY() function to get values to pass as the left and top args to the window.open() method. (the left and top args only work with V3 and up browsers).
window.open docs:
http://www.javascripter.net/faq/openinga.htm
function getMouseXY( e ) {
if ( event.clientX ) { // Grab the x-y pos.s if browser is IE.
CurrentLeft = event.clientX + document.body.scrollLeft;
CurrentTop = event.clientY + document.body.scrollTop;
}
else { // Grab the x-y pos.s if browser isn't IE.
CurrentLeft = e.pageX;
CurrentTop = e.pageY;
}
if ( CurrentLeft < 0 ) { CurrentLeft = 0; };
if ( CurrentTop < 0 ) { CurrentTop = 0; };
return true;
}
Here is something I shamelessly reverse engineered from the Facebook oauth API. Tested on a primary and secondary monitor in Firefox/Chrome.
function popup_params(width, height) {
var a = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft;
var i = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop;
var g = typeof window.outerWidth!='undefined' ? window.outerWidth : document.documentElement.clientWidth;
var f = typeof window.outerHeight != 'undefined' ? window.outerHeight: (document.documentElement.clientHeight - 22);
var h = (a < 0) ? window.screen.width + a : a;
var left = parseInt(h + ((g - width) / 2), 10);
var top = parseInt(i + ((f-height) / 2.5), 10);
return 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',scrollbars=1';
}
window.open(url, "window name", "location=1,toolbar=0," + popup_params(modal_width, modal_height));
// Pops a window relative to the current window position
function popup(url, winName, xOffset, yOffset) {
var x = (window.screenX || window.screenLeft || 0) + (xOffset || 0);
var y = (window.screenY || window.screenTop || 0) + (yOffset || 0);
return window.open(url, winName, 'top=' +y+ ',left=' +x))
}
Call it like the following and it will open on top of the current window
popup('http://www.google.com', 'my-win');
Or make it slightly offset
popup('http://www.google.com', 'my-win', 30, 30);
The point is that window.screenX/screenLeft give you the position in relationship to the entire desktop, not just the monitor.
window.screen.left would be the ideal candidate to give you the information you need. The problem is that it's set when the page is loaded and the user could move the window to the other monitor.
More research
A final solution to this problem (beyond just offsetting from the current window position) requires knowing the dimensions of the screen that the window is in. Since the screen object doesn't update as the user moves a window around, we need to craft our own way of detecting the current screen resolution. Here's what I came up with
/**
* Finds the screen element for the monitor that the browser window is currently in.
* This is required because window.screen is the screen that the page was originally
* loaded in. This method works even after the window has been moved across monitors.
*
* #param {function} cb The function that will be called (asynchronously) once the screen
* object has been discovered. It will be passed a single argument, the screen object.
*/
function getScreenProps (cb) {
if (!window.frames.testiframe) {
var iframeEl = document.createElement('iframe');
iframeEl.name = 'testiframe';
iframeEl.src = "about:blank";
iframeEl.id = 'iframe-test'
document.body.appendChild(iframeEl);
}
// Callback when the iframe finishes reloading, it will have the
// correct screen object
document.getElementById('iframe-test').onload = function() {
cb( window.frames.testiframe.screen );
delete document.getElementById('iframe-test').onload;
};
// reload the iframe so that the screen object is reloaded
window.frames.testiframe.location.reload();
};
So if you wanted to always open the window at the top left of whatever monitor the window is in, you could use the following:
function openAtTopLeftOfSameMonitor(url, winName) {
getScreenProps(function(scr){
window.open(url, winName, 'top=0,left=' + scr.left);
})
}
Open centered window on current monitor, working also with Chrome:
function popupOnCurrentScreenCenter(url, title, w, h) {
var dualScreenLeft = typeof window.screenLeft !== "undefined" ? window.screenLeft : screen.left;
var dualScreenTop = typeof window.screenTop !== "undefined" ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth :
document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight :
document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow =
window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
}
If you know the resolution of each monitor, you could estimate this.
A bad idea for a public website, but might be useful if you know (for some odd reason) that this scenario will always apply.
Relative position to the mouse (as said above) or to the original browser window could also be useful, Though you'd have to suppose the user uses the browser maximized (which is not necessarily true).
I ran into this issue recently and finally found a way to position the pop up window on the screen that it's triggered from. Take a look at my solution on my github page here: https://github.com/svignara/windowPopUp
The trick is in using the window.screen object, which returns availWidth, availHeight, availLeft and availTop values (as well as width and height). For a complete list of the variables in the object and what these variables represent look at https://developer.mozilla.org/en-US/docs/DOM/window.screen.
Essentially, my solution finds the values of the window.screen whenever the trigger for the popup is clicked. This way I know for sure which monitor screen it's being clicked from. The availLeft value takes care of the rest. Here's how:
Basically if the first available pixel from the left (availLeft) is negative, that's telling us there is a monitor to the left of the "main" monitor. Likewise, if the first available pixel from left is greater than 0, this means one of 2 things:
The monitor is to the right of the "main" monitor, OR
There is some "junk" on the left side of the screen (possibly the application dock or windows start menu)
In either case you want the offset of your popup to start from after the available pixel from the left.
offsetLeft = availableLeft + ( (availableWidth - modalWidth) / 2 )
Only user11153's version works with Chrome and dual screen. Here is its TypeScript version.
popupOnCurrentScreenCenter(url: string, title: string, w: number, h: number): Window|null {
var dualScreenLeft = typeof window.screenLeft !== "undefined" ? window.screenLeft : (<any>screen).left;
var dualScreenTop = typeof window.screenTop !== "undefined" ? window.screenTop : (<any>screen).top;
var width = window.innerWidth ? window.innerWidth :
document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight :
document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow =
window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus && newWindow) {
newWindow.focus();
}
return newWindow;
}
as long as you know the x and y position that falls on the particular monitor you can do:
var x = 0;
var y = 0;
var myWin = window.open(''+self.location,'mywin','left='+x+',top='+y+',width=500,height=500,toolbar=1,resizable=0');