Javascript on Multiple Monitor Systems

I have a preference to keep my browser windows a certain width (1024 pixels for various reasons), flush against the right side of my monitor display, and taking the full height of the screen.  To do this, I have the following javascript on my start page:

resizeTo( 1024, screen.availHeight );
moveTo( (screen.availWidth - 1024), 0 );


For some reason though, Firefox has always had some strange behavior when running this script on my systems with multiple monitors.

When on the second display, the window will resize itself properly, but will not position itself according to the math above.  Even inspecting the availWidth field turns out what I’d expect…

I finally figured out why. The moveTo method doesn’t work on the same origin point as the availWidth fields. The important javascript properties that I need to know about are the screen.availLeft and screen.availTop.

In Firefox…  When multiple monitors are positioned side-by-side, availLeft on the left monitor will be zero, and on the right monitor it will be 1024 (or whatever the width resolution is on monitor on the left).  When there is only one screen, availLeft will be zero.

When multiple monitors are stacked vertically, availLeft will be zero on both monitors, and availTop will be zero on your main monitor (the one with the windows task bar) and will be -768 on the other monitor.  This is inconsistent with the availLeft behavior, but once we know about it, it is easy to work around.

So now, my start page script has the following code:

resizeTo( 1024, screen.availHeight );
moveTo( screen.availLeft + (screen.availWidth - 1024), 0 );

When on a single screen, availLeft is zero, and doesn’t affect the calculation.  When on a multi-screen display, it will position the browser as I desire, regardless of which screen the browser is on.

Updated April 08: Also see my follow-up post on OSX + Javascript + Multiple Monitors.