www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to make the background blink?

  1. #1
    Join Date
    Aug 2004
    Location
    Brasília, Brasil
    Posts
    2

    How to make the background blink?

    How to make the background blink?

    I want to have a table head cell background blinking while a sorting is happening.

    Here is where I want to put it:
    http://planeta.terra.com.br/informatica/kakaostats/
    http://planeta.terra.com.br/informat...ts/t13802.html

    If the user clicks on the column head the lines are sorted according to that column. In a new version I'm working on there will be tables with as many as 1300+ lines, which takes a lot to sort. So I need the column head cell to blink so the user knows it is alive and working.

    Tried something like the next script but it didn't work. The browser ever assumes the last color. And it does now help using a loop between the colors. It looks like the document is flushed only after the function end.
    Code:
    <html>
    <head>
    <script language=javascript>
    function cellBlink() {
    	for (var i=0; i<100; i++) {
    		document.getElementById("c").style.backgroundColor = "yellow";
    		document.getElementById("c").style.backgroundColor = "red";
    		}
    	return;
    	}
    </script>
    </head>
    <body onload="javascript:cellBlink();">
    <table>
    <tr>
    <td style="background-color:white;" id=c>
    Cell text
    </td>
    </tr>
    </table>
    </body>
    </html>
    Any ideas would be wellcome.

  2. #2
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    function cellBlink() {
    document.getElementById("c").style.backgroundColor = "yellow";
    setTimeout('cellBlink2()'; 500);
    }
    function cellBlink2() {
    document.getElementById("c").style.backgroundColor = "red";
    setTimeout('cellBlink()'; 500);
    }

  3. #3
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    Oh, and the call need only be <body onload="cellBlink();">

  4. #4
    Join Date
    Jul 2004
    Posts
    986
    Here's another one I had for something else that I quickly added an onload listener and adapted from object based to id based in an attempt to fit your needs....

    If you call the function on body.onload pass the element or cell id and the color you want to blink too as arguements... If you call the function from an onclick event handler on the element or cell itself, you can use this.id and the color...

    To stop the blinking, either call the function with no arquements or if used as an onclick event on the element or cell itself, it will stop onclick if it is currently bilinking and start blinking if it is not...

    The below example provides several ways to use the script...

    Code:
    <style type="text/css">
     <!--
      .blinker { background-color: blue;
                 text-align: center;
                 width:   150px;
                 height:  40px;
                 padding: 10px;
                 margin:  none;
                 border-style: solid;
                 border-color: #000000;
                 border-bottom-width: 5px;
                 cursor:  pointer;
                 cursor:  hand;
      }
     -->
    </style>
    <script type="text/javascript">
     <!--//
      var oldTag,blinker,color=[];
      function blink(element,color1){ 
       var isID = document.getElementById,
           isIE = document.all;
    
        if((!isIE && e || event) && (!isIE && e || event).type.match(/click|load/i)){
          if(oldTag && !oldTag.match(element) || color.length == 0){
             color = [isID(element).currentStyle.backgroundColor,color1];
          }
    
          if(oldTag && oldTag.match(element)){
             isID(oldTag).style.backgroundColor = color[0];
             clearTimeout(blinker);
             oldTag = color = '';
             return;
          }
        }
    
        if(oldTag && !oldTag.match(element)){
             isID(oldTag).style.backgroundColor = color[0];
             clearTimeout(blinker);
        }
    
             newTag = oldTag = element;  
             isID(newTag).style.backgroundColor = 
             isID(newTag).style.backgroundColor.match(color[0]) ? color[1] : color[0];
             blinker = setTimeout('blink(newTag,color[1])',500);
    
      }
     //-->
    </script>
    </head>
    
    <body onload="blink('TD2','orange')">
     <table cellpadding="0" cellspacing="0">
      <tr>
       <td id="TD1" class="blinker" onclick="blink(this.id,'red')">Cell 1</td>
       <td id="TD2" class="blinker" onclick="blink(this.id,'orange')">Cell 2</td>
       <td id="TD3" class="blinker" onclick="blink(this.id,'yellow')">Cell 3</td>
      </tr>
     </table>
    <a href="#" onclick="blink()">Stop Blink</a>
    ......Willy
    Last edited by Willy Duitt; 08-19-2004 at 02:32 AM.

  5. #5
    Join Date
    Aug 2004
    Location
    Brasília, Brasil
    Posts
    2
    Thank you guys. I will try them on Sunday and will post back the results.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles