...

View Full Version : fading effect



HIPPY
12-18-2006, 02:49 PM
ie looked eerywhere but i am unable to find a good fadin effect for a news bar for my site.. i need a code that fades in a message slowly and fades it out and then fades in the next one etc, i hae searched dynamic drive and cant find a decent one, can someone help me out

coothead
12-18-2006, 08:55 PM
Hi there HIPPY,


...I have searched dynamic drive and can't find a decent one, can someone help me out?

I don't know if this a decent enough for you, but I expect that you will soon tell me if it isn't. ;)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>fade in fade out</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#box {
width:300px;
padding:10px;
border:3px double #999;
text-align:center;
margin:30px auto;
}
</style>

<script type="text/javascript">

var words=new Array();
words[0]='message one';
words[1]='message two';
words[2]='message three';
words[3]='message four';
words[4]='message five';
words[5]='message six';

var test=0;
var c=255;
var k=0;
var speed=20;
var obj;

window.onload=function() {
obj=document.getElementById('box');
fadeInOut();
}
function fadeInOut() {
if(test==0) {
c--;
}
else {
c++;
}
obj.style.color='rgb('+c+','+c+','+c+')';
obj.firstChild.nodeValue=words[k];
if(c==0) {
obj.style.fontWeight='bold';
test=1;
}
if(c==255) {
obj.style.fontWeight='normal';
test=0;
k++;
}
if(k==words.length) {
k=0;
}
setTimeout('fadeInOut()',speed);
}
</script>

</head>
<body>

<div id="box">&nbsp;</div>

</body>
</html>

coothead

Mr J
12-18-2006, 10:38 PM
Here's another option


<HTML>
<HEAD>
<TITLE>Fading Elements</TITLE>

<script type="text/javascript">
<!--

arr=[

"A now for a silly rhyme",
"One fine day in the middle of the night",
"Two dead men got up for a fight",
"Back to back they faced each other",
"Drew their swords and shot each other"

]

pause=5

step=1
opac=0
timer=""
count=0

function fadeTxt(){
fadeEl=document.getElementById("fadediv")
fadeEl.innerHTML=arr[count]
opac+=step

if("filters" in document.body && "alpha" in document.body.filters){
fadeEl.filters.alpha.opacity=opac
}
else{
fadeEl.style.MozOpacity=(opac/100)-0.001
}

timer=setTimeout("fadeTxt()",10)

if(opac>=100){
clearTimeout(timer)
opac=100
step=-step
setTimeout("fadeTxt()",pause*1000)
return
}

if(opac<0){
clearTimeout(timer)
step=-step
count++
if(count==arr.length){
count=0
}
fadeTxt()
}

}

// add onload="fadeTxt()" to the opening body tag

// -->
</script>

</HEAD>
<BODY onload="fadeTxt()">

<DIV id="fadediv" style="width:300px; height:100px; filter:alpha(opacity=0); -moz-opacity:0"></DIV>



</BODY>
</HTML>

HIPPY
12-19-2006, 10:55 PM
thanks guys, the first code was perfect..

Mr J
12-20-2006, 01:57 PM
The first script changes the colour of the text from black to white which is ok on a white background, the second script makes it invisible

You'll have to apply a background color to the body to see the subtle differences between the 2 scripts

coothead
12-20-2006, 03:58 PM
...and the second script does not work in Opera. :)
Of course this can be rectified by using opacity, which is now also recognised by Mozilla. ;)

coothead

Mr J
12-20-2006, 04:45 PM
Coothead

I was only pointing out the differences in how the scripts worked

Can you rectify it so that I can see what is required for Opera?:thumbsup:

coothead
12-20-2006, 05:48 PM
Hi there Mr J,

sorry, I did not mean it to sound too serious about this. ;)

In fact, I prefer the opacity method but used the color change method as it was slightly less
involved for fading text to the background-color. Your script will work in Opera like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fading Elements</title>
<style type="text/css">
#container {
width:350px;
padding:10px;
border:3px double #999;
margin:30px auto;
}
#fadediv {
width:350px;
height:25px;
filter:alpha(opacity=0);
opacity:0;
}
</style>

<script type="text/javascript">

arr=[

'And now for a silly rhyme',
'One fine day in the middle of the night',
'Two dead men got up for a fight',
'Back to back they faced each other',
'Drew their swords and shot each other'

];

var pause=5;
var step=1;
var opac=0;
var timer;
var count=0;

function fadeTxt(){
fadeEl=document.getElementById('fadediv');
fadeEl.firstChild.nodeValue=arr[count];
opac+=step;

if(fadeEl.filters){
fadeEl.style.filter='alpha(opacity='+opac+')';
}
else{
fadeEl.style.opacity=(opac/100)-0.001;
}

timer=setTimeout("fadeTxt()",10)

if(opac>=100){
clearTimeout(timer);
opac=100;
step=-step;
setTimeout("fadeTxt()",pause*1000);
return;
}

if(opac<0){
clearTimeout(timer);
step=-step;
count++;
if(count==arr.length){
count=0;
}
fadeTxt();
}
}
window.onload=fadeTxt;

</script>

</head>
<body>

<div id="container">
<div id="fadediv">&nbsp;</div>
</div>

</body>
</html>

coothead

Mr J
12-20-2006, 10:29 PM
Coothead, no problem I took it as being purely informative :thumbsup:

I have nevertheless finally decided to install Opera, I just have to go hunting round again to find out what Opera supports so I can bring some of my other scripts into the 21st century:D

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum