Assigning an Absolute Screen Position Independent of Screen Resolution

Question: How can I position things on the screen so that they always appear in the same position on the screen. I need absolute positioning that is completely independent of the screen resolution used by my visitors?

Answer:Disregarding the obvious position (the top left corner which is the 0,0 position on the screen) an exact absolute position on the screen will be at a different pixel location depending on the screen resolution used by the individual visitors to your site. The location on the screen that is at a location of 20,10 when viewed at 800x600 resolution will have a location of 40,20 at 1600x1200 resolution (and other values for other resolutions).

To be able to assign something to an exact position on the screen, independent of the resolution, we need to take the screen resolution into account in calculating the location that corresponds to our absolute screen position.

To do this we first determine the location relative to one resolution. It doesn't matter which resolution you pick for this. Next we work out the relative size of the portion of the screen to the left and above the position relative to the full screen. For example at 800x600 the position 20,10 is 1/40th of the way across the screen and 1/60th of the way down.

We can now create javascript statements that will assign the absolute screen position into javascript variables using the proportions that we have just calculated.

 var top = screen.height / 60;
var left = screen.width / 40;

This code would set top to 10 and left to 20 at 800x600 resolution as we wanted since 600/60 is 10 and 800/40 is 20. At 1024x768 resolution top would be set to 768/60 (12) and left would be set to 1024/40 (25) which is as close as we can get to the same absolute position on the screen. The equivalent absolute screen position would be calculated for other resolutions.

Now all we need to do is to substitute the variables 'top' and 'left' in place of the top and left values in your code in order to reference that absolute position.

As an example of the sort of use to which this code can be put, please click here to display (assuming that you have Javascript enabled) a fixed size pop up window that is centred on your screen. Note that if you change your screen resolution that the popup window will still be in exactly the same spot. In this instance half the width of the pop up window has been subtracted from screen.width/2 and half the height of the pop up window has been subtracted from screen.height/2 in order to calculate the top left position for the pop up window. Don't forget to allow 8 pixels for the left and right borders and 30 pixels for the title bar and bottom border of the pop up window in calculating the size of the whole window. See Creating a Thumbnail Image Link for the rest of the code used to create this pop up window.

Note the above discussion relates to absolute positioning on the screen. If you require absolute positioning within the browser window then substitute screen.availWidth for screen.width and screen.availHeight for screen.height and perform the same calculations as above. In this instance the resultant left and top positions calculated should be used within code that is calculating relative to the browser window rather than the whole screen.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow