Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: fading effect

  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fading effect

    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

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    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.
    Code:
    
    <!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

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's another option

    PHP Code:
    <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> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    New Coder
    Join Date
    Jun 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks guys, the first code was perfect..

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    Last edited by Mr J; 12-20-2006 at 02:59 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    ...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

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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?
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    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...
    Code:
    
    <!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
    Last edited by coothead; 12-20-2006 at 09:46 PM.

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Coothead, no problem I took it as being purely informative

    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

    Thanks
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •