rotating text with fade-in

Question

I currently have this code for displaying random customer testimonials. I would like to replace the random function with a code that will display the quotes by their order and then repeat them.

<html style="direction:rtl;">
  <DIV id=textrotator style="FONT: 16px arial ; text-align:right; WIDTH: 100%; COLOR: rgb(255,255,255)"></DIV>
  <body bgcolor="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF" topmargin="0" leftmargin="0" rightmargin="0">
  <script type = "text/javascript">
    var hexinput = 255; // initial color value.

    quotation = new Array()
    quotation[0] = "text1"
    quotation[1] = "text2"
    quotation[2] = "text3"

    function fadingtext()
    { 
      if(hexinput >111) 
      { 
        hexinput -=11; // increase color value
        document.getElementById("textrotator").style.color="rgb("+hexinput+","+hexinput+","+hexinput+")"; // Set color value.
        setTimeout("fadingtext()",200); // 200ms per step
      }
      else 
      {
        hexinput = 255; //reset hex value
      }
    }

    function changetext()
    {
      if(!document.getElementById){return}
      var which = Math.round(Math.random()*(quotation.length - 1)); 
      document.getElementById("textrotator").innerHTML = quotation[which]; 
      fadingtext();
      setTimeout("changetext()",8000); 
    }

    window.onload = changetext();
  </script>

score 1 · Answer 1 · answered Jun 12 '13 at 18:57

1

You need to make your index global. Throw which outside of the function and then just increment it, make sure to wrap when you get to the end.

This is the replacement for the "changetext" function:

var which = 0;

function changetext()
{
    which += 1; 
    if (which >= quotation.length)
    {
        which = 0;
    }

    document.getElementById("textrotator").innerHTML = quotation[which]; 

    fadingtext();

    setTimeout("changetext()",8000);
}

answered Jun 12 '13 at 18:57

Richard

6,215
4
33
48

@user2479629 Ok, could you mark it as "accepted" then? (The green checkbox below the up/number/down to the left of this answer.) Thanks. :) – Richard Jun 13 '13 at 13:01

rotating text with fade-in

1 Answers1