I have a page that needs to get the user's screen size and automatically adjust the style of some divs based on the screen size.
Here is the code:
<html>
<head>
<title>Navy Enlisted Advancement System -- Online ordering and Results</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../cgi-bin/tirstyle1
.css" type="text/css">
<script language="JavaScript" type="text/javascript">
function GetScreen()
{
borderstyle = "border 1px none 000000";
var scrWidth = window.screen.width;
if(scrWidth == 1024)
{
// document.getElementById("l
yrTop").st
yle = "position:absolute; width:1000;left: 0px; height:50; z-index:1; border: 1px;background-attachment:
scroll;background-image: url(../../coldmenu/BensNEA
Sheader800
.png);back
ground-rep
eat: no-repeat;background-posit
ion: center;"
//document.getElementById(
"lyrTop").
style.back
groundImag
e= "url(../../coldmenu/BensNE
ASheader10
24.gif)";
document.getElementById("l
eftlayer")
.style="he
ight:540;l
eft: 0px;"
document.getElementById("L
ayer1").st
yle="posit
ion:absolu
te;" + borderstyle + "; width:927; height:535; z-index:3; left: 65; top: 53px; overflow: auto; vertical-align: middle;"
}
else if(scrWidth == 800)
{
document.getElementById("l
yrTop").st
yle="posit
ion:absolu
te; width:765;left: 0px; height:50; z-index:1; border: 1px;background-attachment:
scroll;background-image: url(../../coldmenu/BensNEA
Sheader800
.png);back
ground-rep
eat: no-repeat;background-posit
ion: center;"
document.getElementById("l
eftlayer")
.style="he
ight:390;l
eft: 0px;"
document.getElementById("L
ayer1").st
yle="posit
ion:absolu
te;" + borderstyle + "; width:927; height:535; z-index:3; left: 65; top: 53px; overflow: auto; vertical-align: middle;"
}
else if(scrWidth == 640)
{
document.getElementById("l
yrTop").st
yle="posit
ion:absolu
te; width:620;left: 0px; height:50; z-index:1; border: 1px;background-attachment:
scroll;background-image: url(../../coldmenu/BensNEA
Sheader640
.png);back
ground-rep
eat: no-repeat;background-posit
ion: center;"
document.getElementById("l
eftlayer")
.style="he
ight:200;l
eft: 0px;"
document.getElementById("L
ayer1").st
yle="posit
ion:absolu
te;" + borderstyle + "; width:927; height:535; z-index:3; left: 65; top: 53px; overflow: auto; vertical-align: middle;"
}
else
{
document.getElementById("l
yrTop").st
yle= "position:absolute; width:1000;left: 0px; height:50; z-index:1; border: 1px;background-attachment:
scroll;background-image: url(../../coldmenu/BensNEA
Sheader102
4.gif);bac
kground-re
peat: no-repeat;background-posit
ion: center;"
document.getElementById("l
eftlayer")
.style="he
ight:540;l
eft: 0px;"
document.getElementById("L
ayer1").st
yle="posit
ion:absolu
te;" + borderstyle + "; width:927; height:535; z-index:3; left: 65; top: 53px; overflow: auto; vertical-align: middle;"
}
// alert(document.getElementB
yId("logom
ain").widt
h+ "-" + document.getElementById("l
ogomainimg
").src + "-" + document.getElementById("l
ogofill").
background
+ "-" + document.getElementById("l
ogofill").
height + "-" + document.getElementById("l
ogoimgtext
").src + "-" + document.getElementById("l
inksfill")
.backgroun
d + "-" + document.getElementById("l
inksfill")
.height);
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<form>
<div id="lyrTop" style="position:absolute; width:765;left: 0px; height:50; z-index:1; border: 1px;background-attachment:
scroll;background-image: url(../../coldmenu/BensNEA
Sheader800
.png);back
ground-rep
eat: no-repeat;background-posit
ion: center;">
</div>
<div id="leftlayer" class="leftlayer">
<div align="left" style="position:absolute;l
eft: 3px;">
</div>
</div>
<div id="Layer1" class="darkblue">
</div>
</form>
<script language="JavaScript" type="text/javascript">
GetScreen();
</script>
</body>
</html>
When I do this I get a Member not found error on line 31. Im not quite sure what the problem is here. Any help is appreciated.
Start Free Trial