Dual Monitors and window.open()

Lately, I have been plagued with the complicated tasks of solving problems at work that require dual monitors. However, I only have a single monitor. Until Today!

Today, I got my PC setup with Dual Monitors and was asked to solve the following problem:

“When the user clicks on a link that opens a new window using window.open. Make the window appear on the same monitor as its’ parent.”

So I got started. Quickly I discovered that window.screenLeft (for IE) and window.screenX (for everyone else) will tell me where the window’s border is on the desktop. So what better to do than to throw that in a window.*property* which gave me this code:

// Find Left Boundry of current Window
function FindLeftWindowBoundry()
{
	// In Internet Explorer window.screenLeft is the window's left boundry
	if (window.screenLeft)
	{
		return window.screenLeft;
	}

	// In Firefox window.screenX is the window's left boundry
	if (window.screenX)
		return window.screenX;

	return 0;
}

window.leftWindowBoundry = FindLeftWindowBoundry;

Next, I needed to find the monitor’s left border. Soon after, I figured out that there is no property currently for this, however, you can get the width of the current monitor your window is on by using window.screen.width. There is a big pitfall that needs to be considered, you can have a monitor whose left border starts with a negative X-axis (ie: -1024×0 to 0×768).

So that left with me the following code:

// Find Left Boundry of the Screen/Monitor
function FindLeftScreenBoundry()
{
	// Check if the window is off the primary monitor in a positive axis
	// X,Y                  X,Y                    S = Screen, W = Window
	// 0,0  ----------   1280,0  ----------
	//     |          |         |  ---     |
	//     |          |         | | W |    |
	//     |        S |         |  ---   S |
	//      ----------           ----------
	if (window.leftWindowBoundry() > window.screen.width)
	{
		return window.leftWindowBoundry() - (window.leftWindowBoundry() - window.screen.width);
	}

	// Check if the window is off the primary monitor in a negative axis
	// X,Y                  X,Y                    S = Screen, W = Window
	// 0,0  ----------  -1280,0  ----------
	//     |          |         |  ---     |
	//     |          |         | | W |    |
	//     |        S |         |  ---   S |
	//      ----------           ----------
	// This only works in Firefox at the moment due to a bug in Internet Explorer opening new windows into a negative axis
	// However, you can move opened windows into a negative axis as a workaround
	if (window.leftWindowBoundry() < 0 && window.leftWindowBoundry() > (window.screen.width * -1))
	{
		return (window.screen.width * -1);
	}

	// If neither of the above, the monitor is on the primary monitor whose's screen X should be 0
	return 0;
}

window.leftScreenBoundry = FindLeftScreenBoundry;

Now that the code is written, you can now use window.open to open a window on the monitor the parent window is on.

window.open(thePage, 'windowName', 'resizable=1, scrollbars=1, fullscreen=0, height=200, width=650, screenX=' + window.leftScreenBoundry() + ' , left=' + window.leftScreenBoundry() + ', toolbar=0, menubar=0, status=1');

Oh yeah, IE has a bug in it that prevents opening windows with window.open in the negative X-axis. You have to use windowName.moveTo(-1024, 0); to move it to the negative X-axis.

Enjoy!