How to make a text flash in html/javascript?

var blink_speed = 1000; // every 1000 == 1 second, adjust to suit
var t = setInterval(function () {
    var ele = document.getElementById('myBlinkingDiv');
    ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, blink_speed);
<div id="myBlinkingDiv">Hello World, blinking is back!</div>

I feel dirty.


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>


if you use jQuery you can do something like

<div id="msg"> <strong>This will blink</strong> </div>

<script type="text/javascript" />
    function blink(selector){
        $(selector).fadeOut('slow', function(){
            $(this).fadeIn('slow', function(){
                blink(this);
            });
        });
    }
    $(function() {
        blink('#msg');
    });
</script>

Tags:

Javascript

Html

Css

Recent Posts