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!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fade-In pages in IE and Firefox??

Status
Not open for further replies.
GaryCam

GaryCam

Programmer
Dec 16, 2003
69
US
My client loves the way his old site would fade-in when viewed in IE6. It used the tag:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.4)" />

But that doesn't work in Firefox. In the Web Design Forum BabyJeff gave me the following script to try. It works in Firefox but not in IE7. Can anyone help me get this to work in both?

****** 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>
****** end of code **********

Thanks,
Gary
 
Sort by date Sort by votes
Hi Gary,

I'm pretty sure it's this part hilighted:
Code: 
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;
    }
}
I was trying to basically do a "if IE" check. You could try the following that uses conditional comments and see if it works.

Add this new block of code between the style and script block:
Code: 
<script type="text/javascript">
   var isIE=false;
</script>
<!--[if IE>
<script type="text/javascript">
    isIE=true;
</script>
<![endif]-->
Then update the setOpacity() function:
Code: 
function setOpacity(node, opacity) {
    node.myOpacity = opacity;
    if ([!]isIE[/!]) {
        node.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (opacity * 100) + ')';
    } else {
        node.style.MozOpacity = opacity;
        node.style.KhtmlOpacity = opacity;
        node.style.opacity = opacity;
    }
}
I'm hoping that'll do the trick! I can't be certain... I don't have IE for windows handy at the moment.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Thanks, Jeff, for being so willing to help. Unfortunately that still doesn't work in IE7 on my machine.

~ Gary
 
Upvote 0 Downvote
Last try before I disappear off to bed... I wonder if we also need to add the filter on the body... it would make sense I think.

Code: 
<body [!]style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"[/!]>
If that doesn't do the trick, I'm sure some of the US chaps can help out until I wake up again *lol*

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Thanks, Jeff, but still a no-go in IE7. I've had all sorts of problems since I 'upgraded' to IE7 so maybe it's a problem with my machine's installation of it.
~ Gary
 
Upvote 0 Downvote
Alright Gary, I took some code from Jeffy and played around with it a bit, this is what I came up with. I've tested it in FF as well.

Your javascript will look like this:
Code: 
<script type="text/javascript">
var fadeInCounter = 0;

function setOpacity() {
   var bodyObj = document.getElementById("thisBody");
   if (fadeInCounter <= 10) {
      bodyObj.style.filter = "alpha(opacity=" + (fadeInCounter * 10) + ")"; 
      bodyObj.style.MozOpacity = fadeInCounter * .1;
      bodyObj.style.KhtmlOpacity = fadeInCounter * .1;
      bodyObj.style.opacity = fadeInCounter * .1;
      fadeInCounter++;
   }   
}

function fadeIn() {
   setInterval(setOpacity, 100);
}
</script>

You need a CSS declaration on the body element to set the opacity initially to 0
Code: 
body {
   opacity:0.0;
   -moz-opacity:0.0;
   -khtml-opacity:0.0;
   filter:alpha(opacity=0);
}

And your HTML call on the body tag will look like this:
Code: 
<body id="thisBody" onload="fadeIn()">

As is, it takes 1 second for the page to "fade in". This can be changed by changing the second parameter of the .setInterval function.


[monkey][snake] <.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
918
xwb
xwb
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
739
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
821
AbidingDude
AbidingDude
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
jimbospain
  • Locked
  • Question
script to read in files, parse and add to another file
Replies
1
Views
253
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top