Hey, I've been creating a prototype site for a user interface that I would like to make that allows the browser to display full ads no matter what the screen resolution is.
In short, the content is in an IFrame and the Ads and Navigation Panel (To be added) are placed in divs around it. Using the "Zoom" property of CSS3, I want to make it so the browser zooms in and out as you change its size. I got it working in Chrome, but it doesn't in IE8 (Which most of my site users will be using) or Firefox.
I've narrowed the problem down to changing the CSS with Javascript as I tested and I got all of the values for screen width correct.
I've seen the zoom function done correctly for IE
here, but this code doesn't work in Firefox.
Is there anything that I can do to fix my code. Here it is:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FSA Hight Student Council</title>
<script type="text/javascript">
function resize() {
var width = 0
var height = 0;
//For the AMAZING browsers
if (typeof (window.innerWidth) == 'number') {
width = window.innerWidth;
height = window.innerHeight;
}
//For Internet Explorer 6 and up
else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
//For Internet Exploer 4 type
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
width = document.body.clientWidth;
height = document.body.clientHeight;
}
var zoom = 1 / (745 / height);
document.body.style.zoom = zoom;
}
</script>
<style type="text/css">
<!--
#LayerHead {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100px;
z-index:4;
background-color: #FF0000;
}
#LayerLeft {
position:absolute;
left:0px;
top:0px;
width:150px;
height:100%;
z-index:2;
background-color: #0000FF;
}
#LayerRight {
position:absolute;
right:0px;
top:0px;
width:150px;
height:100%;
z-index:1;
background-color: #00FF00;
}
#LayerFoot {
position:absolute;
left:0px;
bottom:0px;
width:100%;
height:15px;
z-index:3;
background-color: #FFFF00;
}
#LayerContent {
position:absolute;
left:150px;
top:100px;
right:151px;
bottom:16px;
z-index:0;
}
#IFrame {
position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
z-index:0;
}
#LayerTopAd {
position:absolute;
right:5px;
top:5px;
width:728px;
height:90px;
z-index:6;
background-color: #00FFFF;
}
#LayerLeftAd {
position:absolute;
left:15px;
bottom:20px;
width:120px;
height:240px;
z-index:6;
background-color: #00FFFF;
}
#LayerRightAd {
position:absolute;
left:15px;
top:115px;
width:120px;
height:600px;
z-index:6;
background-color: #00FFFF;
}
.style1 {font-size: xx-large}
-->
</style>
</head>
<body id="body" onload="resize()" onresize="resize()">
<div id="LayerHead">
<div id="LayerTopAd">
<div align="center">
<p class="style1">AD!</p>
</div>
</div>
</div>
<div id="LayerLeft">
<div id="LayerLeftAd">
<p class="style1">AD!</p>
</div>
</div>
<div id="LayerRight">
<div id="LayerRightAd">
<p class="style1">AD!</p>
</div>
</div>
<div id="LayerFoot"></div>
<div id="LayerContent">
<iframe src="page.html" id="IFrame"></iframe>
</div>
</body>
</html>
Before you post, read our: 
Cross-Platform "Zoom" Property Compatibility
