Hi,

I am new to programming and I have a class project I can't quite finish without some help.

What I have created: So far I have created an alert to where if you click on "get announcements" a grey box fades in and a lighter grey box pops up with an alert in it.

What I still need: The grey box that fades in needs to detect and fill the entire size of the browser window. the smaller light grey box needs to be centered horizontally and vertically inside the browser window.

Please look at my code and help me with what I am missing (you wont be able to see the images in the code because I don't have them linked. Sorry. I would appreciate any help very much!


<html>
<head>
<title>Faded Announcement</title>

<style>
body
{color:#ff0000; background-color:#000000; text-align:center;}
a
{color:#ff0000; background-color:#ffffff; text-decoration:none;}
a:hover
{background-color:#ff0000; color:#ffffff; text-decoration:none;}
</style>

<script language='JavaScript'>

var factor = 0.00;
var t;
function doMessage ()
{
//alert("Do Message");
createGreyLayer();
t=setInterval("fadeDown()",50);
}

function createGreyLayer()
{
var theBody = document.getElementsByTagName("body")[0];
var theNode = document.createElement('div');
theNode.style.position='absolute';
theNode.style.top='10px';
theNode.style.left='10px';
theNode.style.opacity=0.00;
theNode.style.MozOpacity=0.00;
theNode.style.KhtmlOpacity=0.00;
theNode.style.filter="alpha(opacity=100)";
theNode.style.height=770;
theNode.style.width=1255;
theNode.style.backgroundColor="#c0c0c0";
theNode.style.display="block";
theNode.style.zIndex='1';
theNode.id='GreyLayer';
theBody.appendChild(theNode);
}


function fadeDown()
{
//alert("fadedown")
var theGreyLayer=document.getElementById('GreyLayer')
factor += .05;
theGreyLayer.style.opacity = factor;
if (factor >= 0.50)
{
clearInterval(t);
putMessage();
}
}

function putMessage()
{
var theBody = document.getElementsByTagName("body")[0];
var theNode = document.createElement('div');
theNode.style.position='absolute';
theNode.style.top='250px';
theNode.style.left='230px';
theNode.style.height=300;
theNode.style.width=800;
theNode.style.backgroundColor="#c0c0c0";
theNode.style.display="block";
theNode.style.zIndex='1';
theNode.id='MessageLayer';
theBody.appendChild(theNode);
}

</script>

</head>
<body>
<center>
<h1>the Toast Generation</h1>
<img src="toast1.jpg" width="200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="toast2.jpg" width="200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="toast3.jpg" width="200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br/><br/><br/>
<a href='http://www.apple.com'> Apple </a> <br/><br/>
<a href='http://www.macrumors.com'> Macrumors </a> <br/><br/>
<a href='http://www.appadvice.com'> AppAdvice </a> <br/><br/>
<a href='http://www.gizmodo.com'> Gizmodo </a> <br/><br/>
<br/>
<img src="toast4.jpg" width="200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="toast5.jpg" width="200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="toast6.jpg" width="200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</br></br>
<input type='button' value='Get Announcements' onClick='doMessage()'>
</center>
</body>
</html>