All geek questions in one place

How to make a text flash drive in html / javascript?

I know that blinking text is prohibited in many places, but still, as my client requires, I need to flash one line of text using HTML, JavaScript, which is ever possible. I would like the text to appear and disappear within a few seconds and continue this cycle.

I know the text design: 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 searched and tried a lot of Javascript codes, but no one works.

So, anyone who knows how to do this, post a working version of the code that runs the text in all browsers.

+4
source share
7 answers

You can do something like this:

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

Using a script:

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

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

If you are 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);

Different browsers have different ways of binding event handlers, so I would highly recommend using some kind of cross-browser library for this kind of thing, if possible.

You can also try using the onload event in the body tag. Here is a complete example that I 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>
+17
source 

 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.

+22
source

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>
+2
source

If you really need to do this, you can use the blink plugin for jQuery

http://www.antiyes.com/jquery-blink-plugin

 $(document).ready(function() { $('.blink').blink(); // default is 500ms blink interval. //$('.blink').blink({delay:100}); // causes a 100ms blink interval. });
+1
source

Check out this snippet .

 function blinkIt() { var blinks = document.getElementsByClassName("blink"); for(var i = 0, l = blinks.length; i < l; i++){ var blink = blinks[i]; var visiblity = blink.style.visibility; blink.style.visibility = visiblity == 'visible' ? 'hidden' : 'visible'; } } setInterval(blinkIt, 500 /* blinking interval in ms */);

This solution will make all items blink with a blink class.

EDIT: Tested in Firefox, Chrome, and IE9.

+1
source

You can make the text blink through jquery. Put the text you want to blink in the <blink> , and the javascript below will make it blink. Increase the duration below if it blinks too fast.

 <script type="text/javascript"> setInterval(function(){ $('blink').each(function(){ $(this).css('visibility' , $(this).css('visibility') === 'hidden' ? '' : 'hidden') }); }, 250); </script> <blink>Text to blink here</blink>
0
source

CSS

 .hidden { visibility: hidden; }

JS:

 setInterval(blinkFunc, 200) blinkFunc = function () { var selector = '#some-selector'; jQuery(selector + ':visible').addClass('hidden'); jQuery(selector + ':not(:visible)').removeClass('hidden'); }

This is probably the most cross browser. Note that Webkit does some crazy things with visibility, so it would be easier to just change the color.

-1
source

Source: https://habr.com/ru/post/1384371/

More articles:


All Articles