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)

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.

You may also like

Newsletter sign up

Every couple of months we send out an update on what's been happening around our office and the web. Sign up and see what you think. And of course, we never spam.