sametch
05-11-2003, 11:11 AM
I want to change the value of a style position attribute depending upon the actual working area of the screen.
I have written a function to detect the page width and this works fine. However, I want the style to be defined in the HTML <head> section of code.
Every attempt so far to get it to work has failed. I can get it to work by putting the style definition in the <body> section. But thats bad practice. Can anyone help.
The code below is the one that works by having the inline style called up in the body section. I really want it to work with the style defined in either the head or in an external .css sheet.
:(
<html>
<head>
<title>page title</title>
<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)
{
return 0;
}
else
{
return Math.round((PageSize - WebWidth)/2);
}
}
//-->
</script>
<noscript>
<style type="text/css">
<!--
.container{position: absolute; top: 15px; left: 0px}
-->
</style>
</noscript>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
// I dont want this in the body.
document.writeln("<style type=\"text/css\">");
document.writeln(".container{position: absolute; top: 15px; left: "+LeftStart(720)+"px}");
document.writeln("</style>");
//alert (LeftStart(720));
//-->
</script>
....etc
I have written a function to detect the page width and this works fine. However, I want the style to be defined in the HTML <head> section of code.
Every attempt so far to get it to work has failed. I can get it to work by putting the style definition in the <body> section. But thats bad practice. Can anyone help.
The code below is the one that works by having the inline style called up in the body section. I really want it to work with the style defined in either the head or in an external .css sheet.
:(
<html>
<head>
<title>page title</title>
<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)
{
return 0;
}
else
{
return Math.round((PageSize - WebWidth)/2);
}
}
//-->
</script>
<noscript>
<style type="text/css">
<!--
.container{position: absolute; top: 15px; left: 0px}
-->
</style>
</noscript>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
// I dont want this in the body.
document.writeln("<style type=\"text/css\">");
document.writeln(".container{position: absolute; top: 15px; left: "+LeftStart(720)+"px}");
document.writeln("</style>");
//alert (LeftStart(720));
//-->
</script>
....etc