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.

  • Sep 26

     

     

    If you want a text to blink below is the function.

    <SCRIPT type=text/javascript>
     

     

    function blink(idname) {
    var speed = 300;

     

          s = document.getElementById(idname);
    if (typeof(s) !== ‘undefined’)  {

    s.style.visibility=(s.style.visibility==’visible’)?’hidden’:’visible’;

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

    }

    }

     

    </SCRIPT>

    <body onload=”blink(‘blink_this_text’)”>
    <p id=blink_this_text> Blinking Text </p>

    </body>

     

    Summary: Upon loading the page, the onload function will call the blink function passing along the id of the paragraph, blink_this_text.  The blink speed is set to 300 milli  seconds interval. It then gets the blink_this_text object using the getElemenbById command. If it exists. Visibility is set to hidden if it is visible otherwise it’s invisible. The blinking text function is then called again using the setTimeout function.

    Hope this was helpful and happy coding!