Entries Tagged 'Code' ↓

What? There is more?! Of course. Previously I tackled the horizontal setup of dual monitors, now we tackle the vertical!

So just like window.screenLeft versus window.screenX, window.screenTop only works in IE and window.screenY works in everything else. So here is the code I used to setup a window.*property*:

// Find Top Boundary of current Window
function FindTopWindowBoundary()
{
	// In Internet Explorer window.screenTop is the window's top boundry
	if (window.screenTop)
	{
		return window.screenTop;
	}

	// In Firefox window.screenY is the window's top boundry
	if (window.screenY)
		return window.screenY;

	return 0;
}

window.topWindowBoundary  = FindTopWindowBoundary;

Then just like the horizontal setup, I needed to find the Monitor’s Top Border. Like the horizontal counter-part, you need to check the negative y-axis scenario, which left me with this code:

// Find Top Boundary of the Screen/Monitor
function FindTopScreenBoundary()
{
	// Check if the window is off the primary monitor in a positive axis
	// X,Y                 S = Screen, W = Window
	// 0,0     ----------
	//        |          |
	//        |          |
	//        |        S |
	//         ----------
	// X,Y
	// 0,1280  ----------
	//        |  ---     |
	//        | | W |    |
	//        |  ---   S |
	//         ----------
	if (window.topWindowBoundary() > window.screen.height)
	{
		return window.topWindowBoundary() - (window.topWindowBoundary() - window.screen.height);
	}

	// Check if the window is off the primary monitor in a negative axis
	// X,Y                   S = Screen, W = Window
	// 0,-1024   ----------
	//          |  ---     |
	//          | | W |    |
	//          |  ---   S |
	//           ----------
	// X,Y
	// 0,0       ----------
	//          |          |
	//          |          |
	//          |        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.topWindowBoundary() < 0 && window.topWindowBoundary() > (window.screen.height * -1))
	{
		return (window.screen.height * -1);
	}

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

So now that we have the Top and Left boundaries written, we can open a window in any setup (2 monitors to 4 monitors to X monitors) using the following and be guaranteed that the new window will open in the same monitor as the parent window (except for IE where IE will not open windows in a negative axis).

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

And thus the finale of opening a child window in a dual, quad, whatever monitor setup.

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!

There has been much debate on using XML or JSON with your AJAX, but in my mind, the debate is pointless. Both are nice, one is quicker, one is slower. However, when it comes to development pick what you know best and what you can implement/maintain easiest.

If you do this, you are guaranteed the following:

1. It is easy to maintain and understand the code you wrote months later
2. Chances are your application will not be the quickest in response
3. You will make use of techniques you fully understand than trying to adapt ones that you are unfamiliar with and may implement wrong

So how does JSON differ from returning XML in your AJAX requests? Lets first look at the advantages of XML.

1. Standardized and easily serialized into via .NET
2. The XML is easy to read all within itself
3. You can make use of XSLT, DTDs, etc

How about disadvantages of XML?

1. It is slow in comparison to JSON
2. It can be clumsy when not designed properly

Now for the advantages of JSON:

1. It is faster than XML to parse in JavaScript
2. There are addin’s you can install in .NET or a library in PHP to serialize a JSON string from an object
3. It is hard to make this clumsy as it is based on the Object Design

And the disadvantages of JSON:

1. It is harder to read the serialized output
2. You can’t use XSLT, DTDs, or something of the sort to validate or style the request

As for myself, I am a JSON person. I didn’t used to be though. My original AJAX applications were focused around XML primarily because I could make use of an XSLT and I always validated against a schema. However, JSON has won me over due to speed. JSON’s speed is just ridiculously fast and it showed when I converted a major application over to it. I saved nearly a third of the time it took to do a fairly simple task.

However, pick the poison that you understand most, otherwise, it could have detrimental affects.