Skip to content
Advertisement

How to make a text flash in html/javascript?

ivn

I know flashing text is banned at many places but still as my client requires it, I need to flash one line of text using HTML, JavaScript which ever is feasible. I would like the text to appear and disappear within seconds and continue this cycle.

I know text-decoration:blink in CSS can do this but it only works in FireFox, Opera. And I need this to work in all browsers Firefox, Chrome, Safari, IE. I have searched and tried a lot of Javascript codes but none seem to be working.

So any one who knows how to do this, please post a working version of code which does flash the text in all browsers.

Advertisement

Answer

You can do something like this:

<div id="Foo">Blink</div>

With the script:

$(document).ready(function() {
    var f = document.getElementById('Foo');
    setInterval(function() {
        f.style.display = (f.style.display == 'none' ? '' : 'none');
    }, 1000);

});

Sample: http://jsfiddle.net/7XRcJ/

If you’re not using jQuery, you can try something like this:

window.addEventListener("load", function() {
    var f = document.getElementById('Foo');
    setInterval(function() {
        f.style.display = (f.style.display == 'none' ? '' : 'none');
    }, 1000);

}, false);

Various browsers have different ways of binding event handlers, so I would strongly suggest using some sort of cross-browser library for this sort of thing if possible.

You can also try using the onload event in the body tag. Here’s a full example that I’ve tested in FF and IE7:

function blink() {
   var f = document.getElementById('Foo');
   setInterval(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
   }, 1000);
}
<html>
<body onload="blink();">

<div id="Foo">Blink</div>

</body>
</html>
Advertisement