How to blink two colors in table td using JS?

[bbQsauce]

Hi,

I need to use e.getelementsbytagname to pull background color and make it blink every one minute in table cell td between two colors.

Any help would be awesome!

[Dormilich]

what do you have so far?

[bbQsauce]

I have this so far:

html:

  <tr class='bus'>
   <td>Europe</td>
   <td>EU111</td>
   <td title='One'>Country</td>
   <td class='b_number'>1457</td>
   <td class='notice'>Bus left</td>
  </tr>

I want to make it so class='notice' td changes background color every 1min between two colors i define.

I think it should be simple few lines using e.getElementsByTagName() just not sure how to construct it.

[Dormilich]

I think it should be simple few lines using e.getElementsByTagName() just not sure how to construct it.

why so difficult? you already have a class, thus document.getElementsByClassName() (ok, not in IE) should do the job.

already an idea, how to get the timing working?

[bbQsauce]

I would need this to be done by td not by class.. would it be something like:

var table = document.getElementsByClassName('notice')  
var cells = table.getElementsByTagName("td"); 
  for (var i = 0; i < cells.length; i++) { 
    status = cells[i].getAttribute("status"); 
    if ( status == "open")  
       cells[i].getElementsByTagName('td').style.color='white';
    else
       cells[i].getElementsByTagName('td').style.color='black'; 
}
 

[zorgi]

I saw this problem and strait away i thought jQuery

This is how it can be done with jQuery:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 
$(function(){blinkOn()})
 
function blinkOn(){
    $(".notice").css("background-color", "red");
    setTimeout("blinkOff()", 2000);
}
 
function blinkOff(){
    $(".notice").css("background-color", "white");
    setTimeout("blinkOn()", 60000);
}
</script>
 

This example blinks red every 60 seconds for 2 seconds.

[Dormilich]

note:

setTimeout(blinkOff, 2000);

[zorgi]

Thanks Dorm

Slightly more compact solution:

$(function(){blinkOn(2000, 'red');})
function blinkOn(time, color){
    $(".notice").css("background-color", color);    
    switch(time){
        case 2000:
            setTimeout("blinkOn(60000, 'white')", time);
            break;
        default:
            setTimeout("blinkOn(2000, 'red')", time);            
    }
}
 

[zorgi]

aaaand one more :)

$(function(){
    time = 2000;
    color = 'white';           
    setInterval(function(){
                            $(".notice").css("background-color", color);
                            switch(time){
                                case 2000:
                                    time = 60000;
                                    color = 'red';
                                    break;
                                default:
                                    time = 2000;
                                    color = 'white';
                            }                        
                        }, time);           
})
 

Spoiled for choice :)

[Dormilich]

aaaand one more note:

setTimeout(blinkOn, time, 60000, 'white');

just to have it mentioned