Doesn't work in safari. Any ideas? It's a great script...
Sure. This is an old thread, from 2005. A number of things have changed since then. This new version works in IE 5.5+, Opera 9+, Safari 3 Win (probably all Safari), and FF 2+ (probably all Mozilla based browsers), and probably in any browser that supports addEventListener() and style opacity of any kind (as well as the IE versions mentioned, many of which don't support all these things). Due to the loss of text anti-aliasing in Opera for elements with opacity less than 100%, the biggest change in using this on your page is that the background must be set (see script), as instead of fading the page division in, a division which covers the page is faded out and then removed. You should use standard background style for this setting, either a color, as shown in the demo or a color and background image, ex:
fadeInPage.bg='#fff url(some.gif)'
Any valid css background styles may be used. For best results in most cases, match the page's background style.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">
<!-- NOTE: Above meta tag required for IE page transition, adjust duration (in seconds) as desired -->
<title>Fade-In Page Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* Style for Fade-In Page script */
#fadeDiv {
display:none;
}
/* End Style for Fade-In Page script */
</style>
<script type="text/javascript">
/* Fade-In Page script ©2008 John Davenport Scheuer
As first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This credit must remain for legal use.
*/
fadeInPage.speed=50; //Set speed of transition for non-IE, lower numbers are faster, 20 is the minimum safe value
fadeInPage.bg='#fff'; //Set backgroud style (color or color and image) of transition division for non-IE, should match page background or the predominant color of the page
///////////////// Stop Editing /////////////////
function fadeInPage(){
var el=document.getElementById("fadeDiv");
el.style[fadeInPage.prprt] = el.style[fadeInPage.prprt] == ''? 1 : el.style[fadeInPage.prprt];
if (el.style[fadeInPage.prprt] > 0){
el.style[fadeInPage.prprt] = el.style[fadeInPage.prprt] - 0.02;
setTimeout("fadeInPage()", fadeInPage.speed);
}
else {
el.style[fadeInPage.prprt] = 0;
if(document.removeChild)
el.parentNode.removeChild(el);
}
}
if(document.documentElement&&document.documentElement.style){
fadeInPage.d=document.documentElement, fadeInPage.t=function(o){return typeof fadeInPage.d.style[o]=='string'};
fadeInPage.prprt=fadeInPage.t('opacity')? 'opacity' : fadeInPage.t('MozOpacity')? 'MozOpacity' : fadeInPage.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fadeInPage.set=function(){
var prop=fadeInPage.prprt=='opacity'? 'opacity' : fadeInPage.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n#fadeDiv {\nheight:'+window.innerHeight+'px;display:block;position:fixed;'+
'z-index:10000;top:0;left:0;background:'+fadeInPage.bg+';width:100%;\n'+ prop +':1;\n}\n<\/style>\n');
}
if(window.addEventListener&&fadeInPage.prprt){
fadeInPage.set();
window.addEventListener('load', fadeInPage, false);
}
</script>
</head>
<body>
<div id="fadeDiv"></div>
<div>
Welcome to my Homepage!
</div>
</body>
</html>