Question

I am designing an emergency response page, which needs to display information across 3 different monitors. The first monitor will gather information about the caller, and then contain 2 links. The first link needs to display a different web page on the 2nd monitor, and the 2nd link needs to display a different web page on the 3rd monitor.

Is this possible?

Thanks for any help

Answer 1

The first link needs to display a different web page on the 2nd monitor, and the 2nd link needs to display a different web page on the 3rd monitor.

While, depending on your operating system, it is possible to control where a window appears, there are much fewer options for doing this using javascript / serverside code over HTTP / browsers.

The only sensible way to achieve this is by configuring the displays to be tiles of a larger display rather than independent screens (for *nix/BSD/Linux, check out xinerama).

The code below saves the size of a window – and would only need some simple changes to support x/y offset and multiple windows – I leave it to you as to how you differentiate between the windows.

A simpler approach would be to just have one huge window with frames whose borders align with the monitors.

if (document.getElementById && !document.all) { // NOT for MSIE
    stickySizeOverloadOnload(stickySizeSetWindowSize);
    stickySizeOverloadOnresize(stickySizeSaveWindowSize);
}

function stickySizeSaveWindowSize(event)
{
    var expiry = new Date();
    var path = document.location.pathname;

    expiry.setDate(expiry.getDate()+500);
    stickySizeSetCookie('windowSize', window.outerWidth + ',' + window.outerHeight, expiry, path);
}

function stickySizeSetWindowSize()
{
    var saved=stickySizeGetCookie('windowSize');
    var parts=new Array();
    if (saved.length) {
    parts = saved.split(',');
    if ((parts[0]>100) && (parts[1]>100)) {
        window.outerWidth=parts[0];
        window.outerHeight=parts[1];
    } else {
        alert("invalid size - '" + saved + "'");
        stickySizeDeleteCookie('windowSize');
    }
}
}

function stickySizeOverloadOnload(func)
{
   var oldhandler=window.onload;
   if (typeof window.onload != "function") {
      window.onload=func;
   } else {
     window.onload=function(event) {
       oldhandler(event);
   func(event);
     }
   }
}
function stickySizeOverloadOnresize(func)
{
   var oldhandler=window.onresize;
   if (typeof window.onresize != "function") {
      window.onresize=func;
   } else {
      window.onresize=function(event) {
         oldhandler(event);
         func(event);
      }
   }
}

function stickySizeSetCookie(name, value, expires, path, domain, secure) {
  var curCookie = name + "=" + escape(value) +
  ((expires) ? "; expires=" + expires.toGMTString() : "") +
  ((path) ? "; path=" + path : "") +
  ((domain) ? "; domain=" + domain : "") +
  ((secure) ? "; secure" : "");
  document.cookie = curCookie;
}
function stickySizeGetCookie(name) {
   var dc = document.cookie;
   var prefix = name + "=";
   var begin = dc.indexOf("; " + prefix);
   if (begin == -1) {
      begin = dc.indexOf(prefix);
      if (begin != 0) return null;
   } else
      begin += 2;
   var end = document.cookie.indexOf(";", begin);
   if (end == -1)
   end = dc.length;
   return unescape(dc.substring(begin + prefix.length, end));
}
function stickySizeDeleteCookie(name, path, domain) {
   if (stickySizeGetCookie(name)) {
      document.cookie = name + "=" +
        ((path) ? "; path=" + path : "") +
        ((domain) ? "; domain=" + domain : "") +
        "; expires=Thu, 01-Jan-70 00:00:01 GMT";
   }
}