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

Revium’s Part in ANZ Rebranding

On 23rd October ANZ launched their new branding.  As part of this the release Revium was commissioned to build software tools to assist in the creation of bank publications.  If rebranding is to be successful management must ensure consistency in the presentation of the brand which includes the manner in which bank publications are produced.

Keep Reading

New Products Launch and Redesign of Simply Energy website

The team has been busy with the re-design of the Simply Energy (SE) website to accommodate the launch of a new range of electricity and gas offers available to the public on the 25th of May 2009. The redesign was initiated by the SE Marketing team and the campaign is aimed at driving more visitors to the site to ultimately result in more supply contracts for SE.

Keep Reading

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.