Scripting for 5th Generation Browsers and Beyond - Part II - (4/4)

Scripting for 5th Generation Browsers and Beyond

Understanding Positioning

Having captured a user's browser dimensions we can then use the newly formed variables to position the layer by those dimensions. Hence, the values of page_width/2-100, page_height/2-12, in the layerSetup() script. To determine the meaning of these values, let's think about this in a different way. The value page_width/2-100 literally stands for the browser size divided by 2 and minus 100 pixels from the left edge of the browser.

Dividing the browser size by half centers the layer. However, its positioning is determined by the top left corner of the layer, something that many people often overlook. Therefore, if the content of the layer is sufficiently wide enough, then the layer displays as not being centered. To overcome this we need to take into consideration the layer width. In this instance, the CSS layer centerLayer width is 200 pixels. We halve that, and recognize that for it to appear centered, we need to move it over to the left by 100 pixels. Hence the -100 in the left value. The same logic is applied to the top attribute where the browser's height is divided into 2 and then the layer's height is taken into account.

Let's look at the completed Web page: (live example - opens in new window)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>How to Center A Layer</title>
<script>
function Is() {
    agent  = navigator.userAgent.toLowerCase();
    this.major = parseInt(navigator.appVersion);
    this.minor = parseFloat(navigator.appVersion);
    this.ns    = ((agent.indexOf('mozilla')   !=   -1) && 
                 ((agent.indexOf('spoofer')   ==   -1) && 
                 (agent.indexOf('compatible') ==   -1)));
    this.ns4   = (this.ns && (this.major      ==    4));
    this.ns6   = (this.ns && (this.major      >=    5));
    this.ie    = (agent.indexOf("msie")       !=   -1);
    this.ie3   = (this.ie && (this.major      < 4));
    this.ie4   = (this.ie && (this.major      ==    4) && 
                 (agent.indexOf("msie 5.0")   ==   -1));
    this.ie5   = (this.ie && (this.major      ==    4) && 
                 (agent.indexOf("msie 5.0")   !=   -1));
    this.ie55  = (this.ie && (this.major      ==    4) && 
                 (agent.indexOf("msie 5.5")   !=   -1));
    this.ie6   = (this.ie && (agent.indexOf("msie 6.0")!=-1) );
}
var is = new Is();
function layerObject(id,position,left,top,visibility) {
if (is.ie5|| is.ie55||is.ie6|| is.ns6){
this.obj = document.getElementById(id).style;
this.obj.position = position;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;
}
}
function layerSetup() {
centerLyr = new layerObject('centerLayer','absolute', 
                            page_width/2-100,
                            page_height/2-12,
                            'visible');
}
</script>
<style type="text/css">
<!--
.main { 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 16px; 
color: #FBEED5; 
text-decoration: none
}
-->
</style> 
</head>
<body bgcolor="#999999" onLoad="
if(is.ns6) {
page_width=innerWidth;
page_height=innerHeight;
layerSetup();
} else if(is.ie5 || is.ie55 ||is.ie6) {
page_width=document.body.clientWidth;
page_height=document.body.clientHeight;
layerSetup();
}"
onResize=" history.go(0); ">
<div id="centerLayer" 
     style="position: absolute; width:200px; height:24px; 
            left: 0px; top: 0px; z-index: 6; visibility: hidden;">
<span class="main">This is a Layer 
   Centered By Screen Resolution</span> 
</div>
</body>
</html>

In a sense, a one CSS layer example doesn't really do justice to the power of using object constructors, because one of the real advantages of using them is code reduction, especially when there are lots of CSS layers used in a Web page. It also does not adequately demonstrate the flexibility of object constructors as they can be used with a wide range of purposes in mind. Despite the shortcomings of the above example, it does introduce the notion of object constructors with regards to coding by a singular standard.

Armed with the concepts presented in this article, it is my sincere hope that this will prepare Web developers for the next generation of scripting techniques.

####

About the Author:

Eddie Traversa is available for hire as an independent Web consultant. His award winning sites (https://dhtmlnirvana.com/) endeavor to teach others the latest techniques for building the next killer Web site. Currently Eddie is flat out writing Dynamic XHTML Developers Guide co-authored with Jeff Rouyer, which should be available in mid September.

Scripting for 5th Generation Browsers and Beyond - Part II - (4/4)

Scripting for 5th Generation Browsers and Beyond

Understanding Positioning

About the Author:

Contents:

Find a programming school near you