Javascript Window Tiling

We currently have a customer who needs to track numerous items in realtime via the web.

They wanted to be able to:

• Watch each item in it’s own pop-up window
• As they open each new window tile it should be placed along side the next (to eliminate manual positioning)

From this	To this

Because i went through a few iterations from rediculously complex to fairly to simple i thought i would share the result here.

//keep track of how many windows are open
var win_open = 0;

function openAndTileWindow(url) {
	var pad_left = 20;
	var pad_top = 90;
	var width = 416;
	var height = 350;

	//how many windows can we fit on the screen?
	//i.e. will return the width of the left most screen and firefox will return the width of the current screen.
	//we add pad_left to screen.width because we want the first items flush against the screen
	var max_on_row = Math.floor((screen.width + pad_left) / (width + pad_left));

	//Determine which row this item will be displayed on
	var row = Math.ceil((win_open + 1) / max_on_row) - 1;

	//Determine the position in the current row to display this item
	var pos = win_open - (row * max_on_row);

	//Get the left most position
	var availLeft = 0;
	if (screen.availLeft != undefined)
		availLeft = screen.availLeft; //mozilla only

	//we add padding if it isn't in the first position because we don't want to windows to overlap
	var left = availLeft + (pos * width);
	if (pos > 0)
		left += pad_left * pos;

	//make sure if we reach the bottom of the screen we start at the top again
	while (row > max_rows - 1)
		row -= max_rows;

	//get the top position of the new window
	var top = (row * height);
	if (row > 0)
		top += pad_top;

	window.open(url, 'tile', "toolbar=0,menubar=0,width="+width+",height="+height+",left="+left+",top="+top+",resizable=1");

	win_open += 1;
}

Note: On a single monitor this code works exactly the same for both IE and Firefox. When you have dual monitors it is slightly different. Firefox will work the same in both instances. All the popup windows will always open up on the same monitor on the page. With IE however, the popups will always open up on the Primary Monitor.

Related posts:

1. Creating deployment packages in SVN
2. Windows 7 + VB6 + Standard User’s + The Registry = Arg!