Menu
Hi Everyone,
I am trying to develop a script that will position html elements dynamically within various browsers regardless of screen resolution and hence available screen display area.
The script and test page I am developing looks like this:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Dynamic Element Positioning Script – Phase 1</title>
<script type=”text/javascript”>
//No need to call the browserType() function because a variable of this type is created
//below.
function browserType() {
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 browserType();
function displayProperties()
{
if(is.ns6) {
page_width=innerWidth;
page_height=innerHeight;
} else if(is.ie5 || is.ie55 ||is.ie6) {
page_width=document.body.clientWidth;
page_height=document.body.clientHeight;
}
function elementObject(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 elementSetup(id, position, left, top, visibility) {
positionElement = new elementObject(id, position, left, top, visiblity);
}
</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 onLoad=”displayProperties()”>
<div id=”centerLayer” style=”position: absolute; width:200px;
height:24px; left: 0px; top: 0px; z-index: 6; visibility: hidden;” onload=”elementSetup(‘centerLayer’, ‘absolute’, page_width/2-100, page_height/2-12,’visible’)”>
<span class=”main”>This is a Layer Centered By Screen Resolution</span>
</div>
</body>
</html>
The idea behind this script is that when it loads it creates a new object called ‘is’ which holds details of the browser type (to the best of my knowledge this object is created once the web page is loaded. Please correct me if I am wrong here). Once the body of the document is reached the ‘displayProperties()’ function is called which effectively stores the available screen area of the current browser (regardless of browser type, screen resolution, etc). Finally I am trying to center a div in the middle of the screen with the text “This is a Layer Centered By Screen Resolution”.
Unfortunately I am getting various error messages from different browsers. As I am a beginner with JavaScript I don’t really understand the error messages.
Any help with fixing this script up will be greatly appreciated.
Thanks for your time.
Regards
David?