Testing for multiple screens with javascript

Question

Is it possible to tell if the user of a website is using multiple monitors? I need to find the position of a popup but it\'s quite likely the user will have a multiple moni

Answer 1

This is an overly complicated solution. I'd highly recommend refactoring this - it's not been used on a production site, only as a quick 'proof of concept' to myself.

Right, caveats over.

I've first assumed that the user might not have a dual monitor setup, but they might have a really big monitor and so the same functionality could be applied anyway.

var newWindow,
    screenSpaceLeft = window.screenX,
    screenSpaceTop = window.screenY,
    screenSpaceRight = screen.availWidth - (window.screenX + window.outerWidth),
    screenSpaceBottom = screen.availHeight - (window.screenY + window.outerHeight),
    minScreenSpaceSide = 800,
    minScreenSpaceTop = 600,
    screenMargin = 8,

    width = (screen.availWidth / 2.05),
    height = screen.availHeight,
    posX = (screen.availWidth / 2),
    posY = 0;

e.preventDefault();

if (screenSpaceRight > screenSpaceLeft && screenSpaceRight > screenSpaceTop && screenSpaceRight > screenSpaceBottom && screenSpaceRight > minScreenSpaceSide) {
    if (width > screenSpaceRight) {
        width = screenSpaceRight - screenMargin;
    }
    if (posX < (screen.availWidth - screenSpaceRight)) {
        posX = window.screenX + window.outerWidth + screenMargin;
    }
} else if (screenSpaceLeft > screenSpaceRight && screenSpaceLeft > screenSpaceTop && screenSpaceLeft > screenSpaceBottom && screenSpaceLeft > minScreenSpaceSide) {
    if (width > screenSpaceLeft) {
        width = screenSpaceLeft - screenMargin;
    }

    posX = 0;
} else if (screenSpaceTop > screenSpaceRight && screenSpaceTop > screenSpaceLeft && screenSpaceTop > screenSpaceBottom && screenSpaceTop > minScreenSpaceTop) {
    posX = 0;
    posY = 0;
    width = screen.availWidth;
    height = (screen.availHeight / 2.05);
    if (height > screenSpaceTop) {
        height = screenSpaceTop - screenMargin;
    }
} else if (screenSpaceBottom > screenSpaceRight && screenSpaceBottom > screenSpaceLeft && screenSpaceBottom > screenSpaceTop && screenSpaceBottom > minScreenSpaceTop) {
    posX = 0;
    width = screen.availWidth;
    if (window.screenY + window.outerHeight + screenMargin > (screen.availHeight / 2)) {
        posY = window.screenY + window.outerHeight + screenMargin;
    } else {
        posY = (screen.availHeight / 2);
    }
    height = (screen.availHeight / 2.05);
    if (height > screenSpaceBottom) {
        height = screenSpaceBottom - screenMargin;
    }
}

newWindow = window.open(this.href, "_blank", "width=" + width + ",height=" + height + ",location=yes,menubar=no,resizable=yes,scrollbars=yes,status=yes,menubar=yes,top=" + posY + ",left=" + posX);

It checks how much available screen space there is, and if a minimum amount if available (800 x 600), it opens the window there. If there isn't enough space, it overlays the window on the right hand side of the screen, taking up just about half of it.

Notes:

First, it should be altered to find out where the maximum amount of space is rather than just arbitarily search left, right, top, bottom.

Second, I suspect that in some places where screen.availHeight has been used, screen.height should be used instead. Likewise for width. This is because we're not overly interested in where the taskbar is when deciding if the user has a second monitor or not (or a lot of space on the screen).

Third, it won't work in IE < 8. This can easily be rectified by using screenLeft and screenTop rather than screenX/screenY where appropriate.

Fourth, the code is messy and could be made to look a lot more elegant than it does. I make no apologies for this. However, you should NOT use such awful, unmaintainable JS anywhere and it NEEDS to be rewritten. I've only placed it here because it's in my train of thought at the moment and I'll most likely forget to post a good solution here when I write this properly as it won't happen for a few months.

Right. There you go. I accept no responsibility for making your javascript horrible, ugly and downright difficult to do anything with. :)