Menu
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.
370
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.
147
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
