Question

23

How to make a text flash in html/javascript?

rated 0 times [ 27] [ 4] / answers: 1 / hits: 95378 / 13 Years ago, fri, december 2, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

madelyn

Add To Favorites

Follow

Total Points: 449

Total Questions: 100

Total Answers: 100

Location: Seychelles

Member since Fri, May 7, 2021

3 Years ago

madelyn questions

1 Select value doesnt change the first time I trigger onChange event when using setSate React

Tue, Jan 11, 22, 00:00, 2 Years ago

1 React Native performance slow

Wed, Jul 28, 21, 00:00, 3 Years ago

1 MUI Datatable custom toolbar

Wed, Jul 14, 21, 00:00, 3 Years ago

1 Multi row swiper not working in react from swiper.js

Sat, Nov 7, 20, 00:00, 4 Years ago

1 How to make step wizard form in ReactJs?

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 13 Years ago desiraeleandrah · Accepted 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>