...

View Full Version : Please help with script error :) - Trying to dynamically position div element



3D_Dog_Man
06-18-2004, 01:09 AM
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

Kor
06-18-2004, 11:43 AM
onload is an event handler specific to BODY tag, not to any other objects on document. On the other hand onload must be unique on the page.

Why not fire all the function in the same onload?

<body onLoad="displayProperties();elementSetup('centerLayer', 'absolute', page_width/2-100, page_height/2-12,'visible')">

Or fire the second function from the first inner?

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;
elementSetup('centerLayer', 'absolute', page_width/2-100, page_height/2-12,'visible')
}

Kor
06-18-2004, 11:43 AM
...and, of course, remove onload="..." from div



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum