Techblog

Technical Blog about all things computer

  • Sep 26

    How to make font automatically alternate font colors with Javascript

    <SCRIPT type=text/javascript>

    //Alternating font colors

    function alternatingColors(idname) {

    var speed = 300;   // Speed between one color to the next

    var first_color     = ‘#ff0000’;    //First color Hexadecimal required

    var second_color    = ‘#0000ff’;    //Second color Hexadecimal

       //We are converting the first color to RGB because firefox style.color is in RGB format

    var rgb_color  = “rgb(” + HexToR(first_color) + “, ” + HexToG(first_color) + “, ” + HexToB(first_color) + “)”;

          s = document.getElementById(idname);

    if (typeof(s) !== ‘undefined’)  {

    s.style.color =( (s.style.color == first_color)|| (s.style.color == rgb_color))? second_color : first_color;

    setTimeout(‘alternatingColors(\”+ idname +’\’)’,speed); 

    }

    }

     

    //Hex to RGB Converter Code obtained from http://www.javascripter.net/faq/hextorgb.htm

    function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}

    function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}

    function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}

    function cutHex(h) {return (h.charAt(0)==”#”) ? h.substring(1,7):h}

     

    </SCRIPT>

     

    <body onload=”alternatingColors(‘blink_this_text’)”>

    <p id=blink_this_text> Blinking Text </p>

    </body>

     

    Summary: Upon loading the page, the onload function will call the alternatingColors function passing along the id of the paragraph, blink_this_text.  The interval is set to 300 milli seconds. First color is the first color to change to font to. It has to be in hexadecimal format because this is being converted to RGB because firefox’s style.color format is in RGB. The second color is the second color to change the text to. . It then gets the blink_this_text object using the getElemenbById command. If it exists and color is not the first color, then it will change the color to the second color. The alternatingColors function is called again using the setTimeout function.

    Hope this was helpful and happy coding.