 | |
| 4.5 | Dealing With Screen Sizes |
| |
| 4.5 | Dealing With Screen Sizes |
Making a "normal" HTML page with layers can be somewhat frusterating. Since with layers you're working with absolute positions, if you view a page in a different screen resolution, it will look awkward. Say for example you positioned a layer so that it is centered in a 800x600 screen. Now if you view that page in 640x480 it'll be off the screen to the right. And in 1024x768 it'll be to the left.
One way to get around this would be to make 3 separate pages, one for each resolution. However, I would discourage this method. You'd be maintaining 3 pages instead of just one. I think it's better to devise a scheme that will allow the page to be viewed properly no matter what screen resolution it's viewed in.
A technique that I think is good, is to just make one page where the layers are centered in 800x600 mode. Then using javascript, check what resolution they're in, and then auto-center the layers if they're not in 800x600 mode.
The function to accomplish this task is pretty simple:
function autocenter() {
if (screen.width != 800)
document.layers["mylayer"].left = (screen.width-document.layers["mylayer"].clip.width-20)/2;
}
The screen.width tells us which resolution they're at, 800 means 800x600, 640 means 640x480 and so on. Using this value we can calculate where the left position of the layer has to be in order for the layer to be centered. The extra minus 20 is accounting for the scrollbar.
You can execute this function when the page has finished loading by using onLoad:
<BODY onLoad="autocenter()">
| ||
| 1.1 Introduction
1.2 Overlapping 1.3 Nesting 1.4 Using JavaScript |
2.1 Sliding Layers
2.2 Pre-Built Functions 2.3 Clipping Layers 2.4 Looping Animations 2.5 Changing Images |
3.1 Mouse-Click Animation
3.2 Capturing Keystrokes 3.3 Drag and Drop 4.1 Making Demos 4.4 Problems 4.5 Screen Sizes |
| ||