PDA

View Full Version : Are style definitions in the HTML body OK?

sametch
05-11-2003, 10:22 AM
I am trying to design a website that changes the page style attributes depending upon the width of the browser page suing JavaScript.

The JavaScript creates in inline style using document.write.

Whenever I put the script into the head area of HTML (which Is where I would prefer it). The script fails to run.

I only seam to be able to get it to run in the body section.

Is it OK to define styles in the page body?

The code is as follows:

<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">
<!--
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
liorean
05-11-2003, 11:11 AM
Some browsers might allow them, but according to the specs, they must be placed in the head.
giz
05-11-2003, 01:15 PM
Try putting the style code in an external CSS file, and using Javascript in the <head> section to call that file with a <link> tag.
sametch
05-11-2003, 04:47 PM
liorean

You have confirmed my fears. I would much prefer to define the style position in either the page head or an external .css file. But I just can't get the code that detects the page width, to change the values in these area.

Giz

I am not quite sure how to change the value of an external .css file using JavaScript in the head.

How would I do that?

Sametch:(
pardicity3
05-11-2003, 07:22 PM
Hmm, when you were writing the javascript in the <head> section of your document would you be printing out the JS results before you had your normal <style> declaration. I.e. would your code look like this:

<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);
}
}
document.writeln("<style type=\"text/css\">");
document.writeln(".container{position: absolute; top: 15px;
left: "+LeftStart(720)+"px}");
document.writeln("</style>");
//-->
</script>
<noscript>
<style type="text/css">
<!--
.container{position: absolute; top: 15px; left: 0px}
-->
</style>
</noscript>
</head>
<body>

If that is the case, then (most likely) the reason your code wasn't working is that after you specified the left property the script had generated you specified a new left property of 0 in your regular <style> section. This would of course reset your .container's left position to 0 instead of the left position that was computed by the script....do you see what I am saying?

P.S. I hope you understood this. I seem to be having a terrble time explaining things today.
sametch
05-11-2003, 07:32 PM
Thanks for your thoughts, and yes I do understand them.

This whole thing is causing me alot of grief at the moment. I have changed my strategy entirely, but for some reason the onLoad event is triggering fine on Opera 7.03, Mozilla 1.2 BUT it just won't trigger onLoad in IE5.5. The When I resize the browser it works fine indicating my function is OK and so is the onResize event. But onload IE just wont play ball.

Here is my code.

Anyone any ideas :confused:

<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.
giz
05-12-2003, 12:20 AM
I was thinking more like, putting the style code in an external CSS file, then doing:

document.writeln("<link type=\"text/css\" rel=\"stylesheet\" src=\"/path/file.css\">")