1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:13 pm May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Fades

Code for fades using netscape browser

         

Adam5000

1:31 am on Feb 13, 2006 (gmt 0)

10+ Year Member



I've got my website working good using MSIE but I'm having a little trouble getting it to work with the Netscape browser. Specifically divs that fade in and fade out.

This is how I did it using MSIE

<html>
<head>
<title>Fade In</title>
</head>

<body>

<DIV id=picOne style="Z-INDEX: 9; FILTER: alpha(opacity=0); POSITION: absolute; LEFT: 100px; TOP: 50px">
<img src="picture files/picture 2.jpg" name="PictureOne" border=0;>
</DIV>

<script language="javascript">
var fade;
fade=0
var aaa

function fadeIn()

{fade=fade+2;
document.all.picOne.style.filter='alpha(opacity='+fade+')';
document.all.picOne.style.MozOpacity=eval(fade/100);
aaa=setTimeout('fadeIn();',50);

if (fade>=100)
{clearTimeout(aaa);}}

fadeIn()
</script>

</body>
</html>

But I can't get anything to work using the Netscape browser.

Help!

DrDoc

2:11 am on Feb 13, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The filter is IE proprietary. If you really want the fade, I would recommend going for the type of fade where you change the background color from one color to the other.

Rambo Tribble

5:16 am on Feb 13, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Firefox and Opera use a straight opacity CSS attribute. Try this (note:this doesn't work in Konqueror, but the Apple site claims Safari supports it): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* filter style is necessary to register object with ActiveX (only works with block elements
 that have height or position assigned) */
#divOne{
 font:1.2em Verdana,sans-serif;
 height:300px;
 width:400px;
 background:#cdd;
 padding:1em;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
</style>
<script type="text/javascript">
// op_val sets initial opacity value; fad_var the fade value or amount, bigger is faster; 
// fad_rat sets the rate for different browsers, smaller is faster
var op_val,fad_var,fad_rat;
if(document.defaultView){
 // for standards-compliant browsers
 op_val=1;
 fad_var=.02;
 fad_rat=20;
}else{
 // for IE
 op_val=100;
 fad_var=10;
 fad_rat=50;
}
function fader(){
 op_val=op_val-fad_var;
 document.defaultView? document.getElementById('divOne').style.opacity=op_val : divOne.filters.item("DXImageTransform.Microsoft.Alpha").opacity=op_val;
 if(op_val<=0)clearInterval(fadeIntr);
}
function setFade(){
 fadeIntr=setInterval(fader,fad_rat);
}
</script>
</head>
<body>
<div id="divOne">
 <p>
  <a href="#" onclick="setFade();return false;">alter opacity property</a>
 </p>
</div>
</body>
</html>

DrDoc

5:49 am on Feb 13, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Excellent suggestion, Rambo Tribble :)

Adam5000

2:51 pm on Feb 13, 2006 (gmt 0)

10+ Year Member



This works, but how do I set it to fade in instead of fading out?

Little_G

3:00 pm on Feb 13, 2006 (gmt 0)

10+ Year Member



Hi,

This is my code: 


<head>
<script type="text/javascript">
timerID001 = window.setInterval('fadeIt()', 5);
var c = 100;
var i = 0;
var goingdown = true;
function fadeIt(){
var elem = document.getElementById('lay');
switch(c){
case 0:
goingdown = false;
break;
case 100:
goingdown = true;
break;
}
if(goingdown){
c--;
elem.style.opacity = c/100;
}
else{
c++;
elem.style.opacity = c/100;
}
}
</script>
</head>
<body>
<div id="lay" style="opacity:1;color:#000000;">Layer</div>
</body>

Andrew

whoisgregg

3:39 pm on Feb 13, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Rambo Tribble's code works as intended in Safari 2.0.3.

Rambo Tribble

4:31 am on Feb 14, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




This works, but how do I set it to fade in instead of fading out?

Are you even trying? 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>X-Browser Fade In/Out</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* filter style is necessary to register object with ActiveX (only works with block elements
 that have height or position assigned) */
#outDiv{
 border:4px dashed;
 width:400px;
 padding:0;
}
#divOne{
 font:1.2em Verdana,sans-serif;
 height:300px;
 width:auto;
 background:#cdd;
 padding:1em;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
</style>
<script type="text/javascript">
// op_val sets initial opacity value; fad_var the fade value or amount, bigger is faster; 
// fad_rat sets the rate, smaller is faster; fad_dir is direction of fade
// different numbers are used to get similar effects on different browsers
var op_val,fad_var,fad_rat,fad_dir,top_val;
if(document.defaultView){
 // for standards-compliant browsers
 op_val=1;
 top_val=1;
 fad_var=.02;
 fad_rat=20;
}else{
 // for IE
 op_val=100;
 top_val=100;
 fad_var=10;
 fad_rat=50;
}
function fader(){
 op_val=op_val+(fad_var*fad_dir);
// the following ternary conditional should appear on one line
 document.defaultView? document.getElementById('divOne').style.opacity=op_val : divOne.filters.item("DXImageTransform.Microsoft.Alpha").opacity=op_val;
 if((fad_dir==-1&&op_val<=0)¦¦(fad_dir==1&&op_val>=top_val))clearInterval(fadeIntr);
}
function setFade(){
 op_val>=top_val? fad_dir=-1 : fad_dir=1;
 fadeIntr=setInterval(fader,fad_rat);
}
</script>
</head>
<body>
<div id="outDiv">
 <div id="divOne" onclick="setFade();">
  <p>
   click on div to alter opacity property
  </p>
 </div>
</div>
</body>
</html>

Adam5000

4:32 am on Feb 21, 2006 (gmt 0)

10+ Year Member



Thank you all for your help. You're all fabulous.

Rambo Tribble

3:44 pm on Feb 21, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I updated my code to allow for stopping the fade in/out before either 0% or 100% opacity is reached. You might find it useful. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>X-Browser Fade In/Out</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* filter style is necessary to register object with ActiveX (only works with block elements
 that have height or position assigned) */
#outDiv{
 border:4px dashed;
 width:400px;
 padding:0;
}
#divOne{
 font:1.2em Verdana,sans-serif;
 height:300px;
 width:auto;
 background:#cdd;
 padding:1em;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
</style>
<script type="text/javascript">
// op_val sets initial opacity value; fad_var the fade value or amount, bigger is faster; 
// fad_rat sets the rate, smaller is faster; fad_dir is direction of fade
// different numbers are used to get similar effects on different browsers
var op_val,fad_var,fad_rat,fad_dir,top_val,bot_val;
if(document.defaultView){
 // for standards-compliant browsers
 op_val=1; // applied opacity setting
 top_val=1; // top opacity setting
 bot_val=0; // lowest opacity setting
 fad_var=.02;
 fad_rat=20;
}else{
 // for IE
 op_val=100;
 top_val=100;
 bot_val=0;
 fad_var=10;
 fad_rat=50;
}
function fader(){
 op_val=op_val+(fad_var*fad_dir);
// the following ternary conditional should appear on one line
 document.defaultView? document.getElementById('divOne').style.opacity=op_val : divOne.filters.item("DXImageTransform.Microsoft.Alpha").opacity=op_val;
 if((fad_dir==-1&&op_val<=bot_val)¦¦(fad_dir==1&&op_val>=top_val))clearInterval(fadeIntr);
}
function setFade(){
 op_val>=top_val? fad_dir=-1 : fad_dir=1;
 if(typeof fadeIntr!='undefined')clearInterval(fadeIntr); // in case someone makes multiple clicks 
 fadeIntr=setInterval(fader,fad_rat);
}
</script>
</head>
<body>
<div id="outDiv">
 <div id="divOne" onclick="setFade();">
  <p>
   click on div to alter opacity property
  </p>
 </div>
</div>
</body>
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:13 pm May 14, 2026