Good day everyone, im making a page, and i found a javascript for make a fade in when enter to page, the code works only in firefox but no on IE, how i can fix this? here are the 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=utf-8" /> <meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)"> <script type="text/javascript"> function fadeInPage(){ if (document.getElementById("fadeDiv").style.MozOpacity < 1){ document.getElementById("fadeDiv").style.MozOpacity = .1 + Math.abs(document.getElementById("fadeDiv").style.MozOpacity) setTimeout("fadeInPage()",200); } else document.getElementById('fadeDiv').style.visibility = "visible"; } </script> <title>Food and Wine Mexico</title></head> <body onLoad="fadeInPage()"> <DIV ID="fadeDiv" style="-moz-opacity:0.00; width:100%"> <div align="center"> <p><img src="header.png" width="964" height="103" /></p> <p>gfgfhy</p> </div> </DIV> <body> <div align="center"></div> </body> </html> HTML: i follow all steps but in IE dosnt work, i hope somebody can help me
Use a framework, jquery for an example. It takes 1 line of code to do it jquery and it's compatible with all browsers.
Give this a try. Adjust the cycle and/or step variables to suit. Note that MozOpacity/-moz-opacity only worked for Firefox 1.6 and earlier, after which FF adopted the CSS3 standard opacity property. <!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=utf-8" /> <title>Test Opacity</title> <script type="text/javascript"> var opac = 0; function fadeInPage(){ var step = 1; // opacity increase per cycle var cycle = 20; // millisec per cycle var obj = document.getElementById("fadeDiv").style; obj.MozOpacity = (opac / 101); // Firefox <1.7 only obj.opacity = (opac / 100); obj.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+opac+")"; if (opac < 100) { opac += step; setTimeout(fadeInPage, cycle); } } </script> <style type="text/css"> body { width: 100%; } div#fadeDiv { width: 100%; } /* for IE6&7 hasLayout */ </style> </head> <body onLoad="fadeInPage()"> <div id="fadeDiv"> <div align="center"> <img src="header.png" width="964" height="103" alt="Image1" /> <p>gfgfhy</p> </div> </div> </body> </html> Code (markup):