Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Fading in & out in Mozilla
- Thread starter GaryCam
- Start date
I haven't tested this in IE or Firefox in Windows - but I'm expecting it will work. I have tested it in Safari and Firefox in MacOSX with no problems.
Regardless, this shows how you can achieve a "Fade in" effect (and not bother with the IE specific command at all)...
Let me know how you go... and if you need help, raise a question in the javascript forum![[smile]](/data/assets/smilies/smile.gif "[smile] [smile]")
Cheers,
Jeff
[tt]Jeff's Page @ Code Couch
[/tt]
What is Javascript? FAQ216-6094
Regardless, this shows how you can achieve a "Fade in" effect (and not bother with the IE specific command at all)...
Code:
<html>
<head>
<title>Test Fading a page in</title>
<style type="text/css">
body {
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
</style>
<script type="text/javascript">
window.onload = fadeInPage;
var fadeStep = 0.1;
var fadeSpeed = 100; // milliseconds (smaller is faster)
function fadeInPage() {
fadePage('in');
}
var fadeHndl = null;
function fadePage(direction) {
var node = document.getElementsByTagName('body')[0];
if (fadeHndl == null) {
node.myOpacity = (direction == 'in') ? 0 : 1;
fadeHndl = setInterval('fadePage("' + direction + '")', fadeSpeed);
} else {
var opacity = getOpacity(node);
if ((opacity >= 1 && direction == 'in') || (opacity <= 0 && direction == 'out')) {
clearInterval(fadeHndl);
fadeHndl = null;
} else {
var newOpacity = (direction == 'in') ? opacity + fadeStep : opacity - fadeStep;
setOpacity(node, newOpacity);
}
}
}
function setOpacity(node, opacity) {
node.myOpacity = opacity;
if (node.style.filter == 'undefined') {
node.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (opacity * 100) + ')';
} else {
node.style.MozOpacity = opacity;
node.style.KhtmlOpacity = opacity;
node.style.opacity = opacity;
}
}
function getOpacity(node) {
if (typeof(node.myOpacity) != 'undefined') return(parseFloat(node.myOpacity));
return(1);
}
</script>
</head>
<body>
<h1>Lorem ipsum</h1>
<p>Dolor sit amet.</p>
</body>
</html>Let me know how you go... and if you need help, raise a question in the javascript forum
Cheers,
Jeff
[tt]Jeff's Page @ Code Couch
[/tt]
What is Javascript? FAQ216-6094
You need to cope with the possibility that the visitor has JS switched off. As I understand it, Jeff's script will leave your page totally non-opaque in that situation. Maybe it needs to be set fully opaque in the CSS, with a bit of JS straight afterwards to reset the opacity to 0.
Frankly, I'd advise against page transition effects altogether. Sure, it looks cool to you, but you already know what's on the page. You need this sort of gew-gaw to jazz it up.
As a visitor, I want to see what's on the page. I've already got to wait for the page to load, I don't want to wait for some stupid JS effect. Do that to me and it's back button time. If you want to make your site more interesting, do it with content!
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
Frankly, I'd advise against page transition effects altogether. Sure, it looks cool to you, but you already know what's on the page. You need this sort of gew-gaw to jazz it up.
As a visitor, I want to see what's on the page. I've already got to wait for the page to load, I don't want to wait for some stupid JS effect. Do that to me and it's back button time. If you want to make your site more interesting, do it with content!
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
- Status
Similar threads
- Locked
- Question