Recipe 3.2 Setting Text to Blink

‚ < ‚ Day Day Up ‚ > ‚

Problem

You want to set text to blink in a web page.

Solution

The first part includes the blink JavaScript function:

 function blinky(delay){  var el = document.body.getElementsByTagName('SPAN');  for (var i = 0; i < el.length; i++){   if (el[i].className == 'blink'){    el[i].style.visibility = el[i].style.visibility ==  'hidden' ? 'visible' : 'hidden';   }  }  setTimeout('blinky(' + delay + ')', delay); }

In the body element, place the onload event to execute the function when the document has fully loaded:

 <body onload="blinky(1000);">

Then wrap a span element with the class attribute set to blink around the text you want to animate:

 <span class="blink">Hello, world!</span>

Discussion

The blink value for the text-decoration property shares an unusual distinction with other text-decoration values: browsers don't need to support blink to be standards-compliant in terms of support for this CSS property. If the browser engineers want to support it, that's OK, and if they don't, that's OK as well.

Web developer Dan Thomas from the Babble List (http://www.babblelist.com/) created this standards-based solution to give blink functionality without requiring that the browser support the blink property. Note that this workaround requires JavaScript, so the function will not work if the user has JavaScript turned off in her browser preferences.

Problem

Solution

Discussion

See Also