CODEWITHSUNDEEP
javascripthtmlfontscolors
user1022585
user1022585

Reputation: 13651

HTML flashing text colors

This is quite an unusual request, but..

Is there anyway to make some text alternate between 2 colors every second?

So it appears as though it's flashing between say... red and grey? I don't mean background color, I mean the actual font color. I'm assuming it would need javascript or something.

Is there any simple way to do that?

(disregarding the fact it could look ugly)

UPDATE

Id like to call to this function several times on my page, each one passing along a different color to alternate with GREY

.

Upvotes: 5

Views: 41017

Answers (4)

dragonfire
dragonfire

Reputation: 702

Here's some simple easy to understand code.

var count_x = 1,
    max_x = 5;  // Change this for number of on-off flashes

var flash_color_notify = setInterval(function () {
    /* Change the color depending if it's even(= gray) or odd(=red) */
    if (count_x % 2 === 0) {    // even
        $('#element').css('color', 'gray');
    } else {                    // odd
        $('#element').css('color', 'red');
    }

    /* Clear the interval when completed blinking */
    if (count_x === max_x * 2) {
        clearInterval(flash_color_notify);
    } else { count_x += 1; }
}, 500);

Upvotes: 0

j08691
j08691

Reputation: 207900

Here's an easy way to do it with plain JavaScript:

function flash() {
    var text = document.getElementById('foo');
    text.style.color = (text.style.color=='red') ? 'green':'red';
}
var clr = setInterval(flash, 1000);

This will alternate the color of the text between red and green every second. jsFiddle example.

Here's another example where you can set the colors of different elements:

function flash(el, c1, c2) {
    var text = document.getElementById(el);
    text.style.color = (text.style.color == c2) ? c1 : c2;
}
var clr1 = setInterval(function() { flash('foo1', 'gray', 'red') }, 1000);
var clr2 = setInterval(function() { flash('foo2', 'gray', 'blue') }, 1000);
var clr3 = setInterval(function() { flash('foo3', 'gray', 'green') }, 1000);

and the jsFiddle to go with it. You pass the ID of the element you want to flash and the two colors to alternate between.

Upvotes: 7

Barrie Reader
Barrie Reader

Reputation: 10713

As per your request:

    function flashtext(ele,col) {
    var tmpColCheck = document.getElementById( ele ).style.color;

      if (tmpColCheck === 'silver') {
        document.getElementById( ele ).style.color = col;
      } else {
        document.getElementById( ele ).style.color = 'silver';
      }
    } 

    setInterval(function() {
        flashtext('flashingtext','red');
        flashtext('flashingtext2','blue');
        flashtext('flashingtext3','green');
    }, 500 ); //set an interval timer up to repeat the function

JSFiddle here: http://jsfiddle.net/neuroflux/rXVUh/14/

Upvotes: 13

HellaMad
HellaMad

Reputation: 5374

With JavaScript it is very simple:

function alternateColor(color, textId, myInterval) {
    if(!myInterval){
        myInterval = 1000;    
    }
    var colors = ['grey', color];
    var currentColor = 1;
    document.getElementById(textId).style.color = colors[0];
    setInterval(function() {
        document.getElementById(textId).style.color = colors[currentColor];
        if (currentColor < colors.length-1) {
            ++currentColor;
        } else {
            currentColor = 0;
        }
    }, myInterval);
}
alternateColor('red','myText');

Call the function with the first argument being a color, the second being your text's ID, and third being the interval time (optional). Jsfiddle example

Upvotes: 0

Related Questions