PDA

View Full Version : Getting a div to fade...

Mike in utah
5-9-07, 10:46 PM
Hi,

I'm trying to get a div to fade. The following attempt is the what I came up with but...it doesn't work. Can someone maybe give me some pointers? Thanks...


<html>
<head>
<title>Example</title>
<script type="text/javascript">

var intl;
var number = 1;

function testFade(){
var eltBody = document.getElementsByTagName('body').item(0);
eltNotify = document.createElement('div');
eltNotify.id='text';
eltNotify.style.display = 'block';
eltNotify.innerHTML = 'Copied';
eltBody.appendChild(eltNotify);
eltNotify.style.width='50';
eltNotify.style.height='21';
eltNotify.style.backgroundColor='gold';
int1 = setInterval("changeNos('text');",25);
}

function changeNos(id){
if(number<=20){
number++;
divFade(id);
} else {clearInterval(int1);}
}

function divFade(id){
var object = document.getElementById(id);
if(navigator.appName=="Netscape"){
object.style.MozOpacity = 0.05*number;
} else {
junk=5*number;
object.style.filter='alpha(opacity = junk)';
}
}


</script>
</head>
<body onload="testFade()">
</body>
</html>
Kitchensink108
5-9-07, 11:56 PM
Made a few small changes. See if it does what you want yet:
<html>
<head>
<title>Example</title>
<script type="text/javascript">

var intl;
var number = 1;

function testFade(){
var eltBody = document.getElementsByTagName('body').item(0);
eltNotify = document.createElement('div');
eltNotify.id='text';
eltNotify.style.display = 'block';
eltNotify.innerHTML = 'Copied';
eltBody.appendChild(eltNotify);
eltNotify.style.width='50';
eltNotify.style.height='21';
eltNotify.style.backgroundColor='gold';
int1 = setInterval("changeNos('text');",25);
}

function changeNos(id){
if(number<=20){
number++;
divFade(id);
} else {clearInterval(int1);}
}

function divFade(id){
var object = document.getElementById(id);
if(navigator.userAgent.indexOf("MSIE") == -1){
object.style.opacity = 0.05*number;
} else {
junk=5*number;
object.style.filter='alpha(opacity = "' + junk + '")';
}
}


</script>
</head>
<body onload="testFade()">
</body>
</html>
Mike in utah
5-10-07, 04:24 AM
Kitchensink108,

Thanks for your help and time!

Sorry, what I wanted to do was have the div slowly disappear. So my goof was that I SHOULD have started with 100 and worked to 0 (for ie) and 1 to 0 for Firefox. If that gets changed everything works great. I guess that's what I get for trying to do this so late. The other goof I made was that I need to set the opacity to some value in the first place otherwise I get javaScript errors. :(

Funny how a few hours away from this can clear my mind!

Here's the working code in case someone is interested...


<head>
<title>Example</title>
<script type="text/javascript">

var intr;
var number;

function testFade(){
var eltBody = document.getElementsByTagName('body').item(0);
eltNotify = document.createElement('div');
eltNotify.id='text';
eltNotify.style.display = 'block';
eltNotify.innerHTML = 'This is fading!';
eltBody.appendChild(eltNotify);
eltNotify.style.width='90';
eltNotify.style.height='21';
eltNotify.style.backgroundColor='gold';
if(navigator.userAgent.indexOf("MSIE") == -1){number=1;}
else {number=100;}
eltNotify.style.opacity = number;
eltNotify.style.filter = 'alpha(opacity=' + number + ')';

intr = setInterval("divFade('text');",75);

}

function divFade(id){
var object = document.getElementById(id);
if(number>0){
if(navigator.userAgent.indexOf("MSIE") == -1){
object.style.opacity = number;
number-=.05;
number=Math.round(number*100)/100;
} else {
object.style.filter = 'alpha(opacity=' + number + ')';
number-=5;
}
}

else {
clearInterval(intr);

}
}

</script>
</head>
<body onload="testFade()">
</body>