Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Earth
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Cross-Platform "Zoom" Property Compatibility

    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>

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    "zoom" is a very poorly-implemented feature across browsers. Recent Webkit builds (Safari, Chrome) do support it, for mozilla, you can use -moz-transform instead, in IE8 it'll only work in compatibility mode, and IE9 it's depreciated AFAIK. It isn't supported by anything lower than IE5.5. I'd avoid it entirely until there's a reliable implementation.

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Earth
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your knowledge, I've created some new code that doesn't zoom.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •