How to blink two colors in table td using JS?

[bbQsauce]

Hi,

I need to use e.getelementsby tagname 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.getElementsBy TagName() just not sure how to construct it.

[Dormilich]

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

why so difficult? you already have a class, thus document.getEle mentsByClassNam e() (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