PDA

View Full Version : centraziled positioning script works in body but no in head

sametch
05-10-2003, 06:42 AM
I am fairly new to JavaScript.

I want to be able to detect the working width of a screen and then position the contents of my website in the middle. I have written a script to do this. It works in the body section, but not if I cut and paste it to the header section where I want to put it. Doeas anyone know why or have any suggestions on a better way to do this?

My code:

<script language="JavaScript" type="text/javascript">
<!--
var leftstart=0;
var pagesize = document.body.clientWidth;
pagesize = Math.round(pagesize/2);
leftstart = pagesize-360;
if (leftstart < 0) leftstart=0;
document.writeln("<style type=\"text/css\">");
document.writeln(".container{position: absolute; top: 15px; left: "+leftstart+"px}");
document.writeln("</style>");
alert (pagesize);
alert (leftstart);
//-->

sametch:confused:
Algorithm
05-10-2003, 10:57 AM
Javascript statements that are declared naked in the header are executed before the document body is even established, so it's impossible to run any code that deals with the document prior to the body declaration.

You can still keep this code in the header, but it needs to be called after the document has loaded, like so:<script language="JavaScript" type="text/javascript">
<!--
window.onload = function(){
var leftstart=0;
var pagesize = document.body.clientWidth;
pagesize = Math.round(pagesize/2);
leftstart = pagesize-360;
if (leftstart < 0) leftstart=0;
document.writeln("<style type=\"text/css\">");
document.writeln(".container{position: absolute; top: 15px; left: "+leftstart+"px}");
document.writeln("</style>");
alert (pagesize);
alert (leftstart);
}
//--></script>
sametch
05-10-2003, 06:11 PM
Algorithm

I tried what you suggested, but it still didn't work.

I even tried copying and pasting directly out of your message.

Still with the code in the body section the page is centred and I get my debugging alerts with the diminsions.

But once I paste it into the head section. The site is left centred with no alerts occuring!

:(
Algorithm
05-10-2003, 09:55 PM
My apologies, I hadn't given the code more than a cursory glance.

Since your code employs document.writeln(), it can't be called after the document has loaded. And since you cannot reference document.body in the <head> before the page has loaded, there is no way to avoid putting the code inside the <body> tag.

However, there are methods that can allow you to avoid using document.writeln() altogether. Here's an example that should work in your <head>, if you change class="container" to id="container" in your <body>.<script language="JavaScript" type="text/javascript">
<!--
window.onload = function(){
var leftstart=0;
var pagesize = document.body.clientWidth;
pagesize = Math.round(pagesize/2);
leftstart = pagesize-360;
if (leftstart < 0) leftstart=0;
document.getElementById('container').style.left = leftstart;
alert (pagesize);
alert (leftstart);
}
//--></script>
<style type="text/css"><!--
#container {position: absolute; top: 15px; left: 0px}
--></style>
sametch
05-11-2003, 07:08 AM
Algorithm

I tried your new code, again cutting and pasting it directly in to avoid making mistakes, but it still doesn't appear to work.

Sametch:(
Algorithm
05-11-2003, 10:40 AM
Did you do this part?Originally posted by Algorithm
change class="container" to id="container" in your <body>
sametch
05-11-2003, 04:45 PM
Yes. I changed <div class="container"> to <div id="container"> still no joy.

Well frustrating this!:(
sametch
05-11-2003, 07:25 PM
Algorithm

Using the ideas you have given me. I have got it working in Mozilla 1.2, Opera 7.03 But it refuses to work on IE 5.5 (all on a W2K machine)

My function works in IE 5.5, because I have tested it with an onResize event. But it won't trigger off the onLoad event.

Any ideas. :confused:

Here is my code:

<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function LeftStart(WebWidth)
{
var PositionStart=0;
var PageSize=0;
if (document.body.clientWidth != null)
{
PageSize=document.body.clientWidth;
}
else
{
if (window.innerWidth != null)
{
PageSize=document.innerWidth;
}
}
if (PageSize > WebWidth)
{
PositionStart=Math.round((PageSize - WebWidth)/2);
}
document.getElementById('container').style.left = PositionStart;
}
//-->
</script>
<style type="text/css">
<!--
#container{position: absolute; top: 15px; left: 0px}
-->
</style>
<body onLoad="LeftStart(720)" onResize="LeftStart(720)">
<div id="container">
...etc.
Algorithm
05-11-2003, 09:16 PM
Well, copying and pasting what you have works just fine in IE6, so I'm afraid I can't help you. :confused:
sametch
05-12-2003, 07:13 AM
Algorithm

Youve helped me lots already :thumbsup:

And for some miraculus reason it is now working on IE5.5 as well.

It works fine on most PC browsers except Opera pre 6 and Netscape Pre 6.2