By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,511 Members | 1,176 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,511 IT Pros & Developers. It's quick & easy.

How to blink two colors in table td using JS?

P: 3
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!
Feb 15 '10 #1
Share this Question
Share on Google+
9 Replies


Dormilich
Expert Mod 5K+
P: 8,639
what do you have so far?
Feb 15 '10 #2

P: 3
I have this so far:

html:

Expand|Select|Wrap|Line Numbers
  1.   <tr class='bus'>
  2.    <td>Europe</td>
  3.    <td>EU111</td>
  4.    <td title='One'>Country</td>
  5.    <td class='b_number'>1457</td>
  6.    <td class='notice'>Bus left</td>
  7.   </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.
Feb 15 '10 #3

Dormilich
Expert Mod 5K+
P: 8,639
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?
Feb 15 '10 #4

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

Expand|Select|Wrap|Line Numbers
  1. var table = document.getElementsByClassName('notice')  
  2. var cells = table.getElementsByTagName("td"); 
  3.   for (var i = 0; i < cells.length; i++) { 
  4.     status = cells[i].getAttribute("status"); 
  5.     if ( status == "open")  
  6.        cells[i].getElementsByTagName('td').style.color='white';
  7.     else
  8.        cells[i].getElementsByTagName('td').style.color='black'; 
  9. }
  10.  
Feb 15 '10 #5

zorgi
Expert 100+
P: 431
I saw this problem and strait away i thought jQuery

This is how it can be done with jQuery:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript">
  3.  
  4. $(function(){blinkOn()})
  5.  
  6. function blinkOn(){
  7.     $(".notice").css("background-color", "red");
  8.     setTimeout("blinkOff()", 2000);
  9. }
  10.  
  11. function blinkOff(){
  12.     $(".notice").css("background-color", "white");
  13.     setTimeout("blinkOn()", 60000);
  14. }
  15. </script>
  16.  
This example blinks red every 60 seconds for 2 seconds.
Feb 15 '10 #6

Dormilich
Expert Mod 5K+
P: 8,639
note:
Expand|Select|Wrap|Line Numbers
  1. setTimeout(blinkOff, 2000);
Feb 15 '10 #7

zorgi
Expert 100+
P: 431
Thanks Dorm

Slightly more compact solution:
Expand|Select|Wrap|Line Numbers
  1. $(function(){blinkOn(2000, 'red');})
  2. function blinkOn(time, color){
  3.     $(".notice").css("background-color", color);    
  4.     switch(time){
  5.         case 2000:
  6.             setTimeout("blinkOn(60000, 'white')", time);
  7.             break;
  8.         default:
  9.             setTimeout("blinkOn(2000, 'red')", time);            
  10.     }
  11. }
  12.  
Feb 15 '10 #8

zorgi
Expert 100+
P: 431
aaaand one more :)
Expand|Select|Wrap|Line Numbers
  1. $(function(){
  2.     time = 2000;
  3.     color = 'white';           
  4.     setInterval(function(){
  5.                             $(".notice").css("background-color", color);
  6.                             switch(time){
  7.                                 case 2000:
  8.                                     time = 60000;
  9.                                     color = 'red';
  10.                                     break;
  11.                                 default:
  12.                                     time = 2000;
  13.                                     color = 'white';
  14.                             }                        
  15.                         }, time);           
  16. })
  17.  
Spoiled for choice :)
Feb 16 '10 #9

Dormilich
Expert Mod 5K+
P: 8,639
aaaand one more note:
Expand|Select|Wrap|Line Numbers
  1. setTimeout(blinkOn, time, 60000, 'white');
just to have it mentioned
Feb 16 '10 #10

Post your reply

Sign in to post your reply or Sign up for a free account.