CODEWITHSUNDEEP
javascripthtmlcss
enthusiastic
enthusiastic

Reputation: 742

Blinking text cross browser

I want to make a blinking text.

First I tried the <blink> HTML tag, but it is only supported in Mozilla Firefox.

Then I tried CSS:

<style>
.blink {text-decoration: blink; }
</style>

It's not working on IE 6.

Then I tried javascript:

<script type="text/javascript">
function doBlink() {
  // Blink, Blink, Blink...
  var blink = document.all.tags("BLINK")
  for (var i=0; i < blink.length; i++)
    blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : "" 
}

function startBlink() {

  if (document.all)
    setInterval("doBlink()",500)
}
window.onload = startBlink;
</script>

Now it's not working on Safari or Chrome.

Can anybody help me use blinking text which will run on all the different popular browsers? (IE 6, Mozilla Firefox, Google Chrome Safari, Opera.)

Upvotes: 21

Views: 72968

Answers (11)

Peterp
Peterp

Reputation: 1

This is not my code, but it works well in our web site. Only problem is that It works if included in the html but not when referenced as a seperate script.

    <style>
    #blinker    { color: #58bf7a }
    #blinker.on { color: #58d878 }
    </style> 

    <script> 
        var blinker;
        function blink() {
            blinker.className = blinker.className ? "" : "on";
        }
        window.onload = function() {
            blinker = document.getElementById("blinker");
            var interval_id = setInterval(blink, 1000);
        }
    </script>

Upvotes: 0

Josh Anderson
Josh Anderson

Reputation: 1

This works great:

<script type="text/javascript">
    function blinker()
    {
        if(document.querySelector("blink"))
        {
            var d = document.querySelector("blink") ;
            d.style.visibility= (d.style.visibility=='hidden'?'visible':'hidden');
            setTimeout('blinker()', 500);
        }
    }
</script>



<body onload="blinker();">
    <blink>Blinking Text</blink>
</body>

It looks really like the old version, plus it is used the same too.

Upvotes: 0

user2619700
user2619700

Reputation: 51

It is working smoothly in all the browsers...Please try it it will work

<script type="text/javascript">
    function blinker()
    {
        if(document.getElementById("blink"))
        {
            var d = document.getElementById("blink") ;
            d.style.color= (d.style.color=='red'?'white':'red');
            setTimeout('blinker()', 500);
        }
    }
</script>

<body onload="blinker();">
    <div id="blink">Blinking Text</div>
</body>

Upvotes: 1

Ankur Kumar
Ankur Kumar

Reputation: 455

<p id="blink">My name is Ankurji1989</p>


<script type="text/javascript">

var blink_line = document.getElementById("blink");

function d_block(){

    if(blink_line.style.visibility=='hidden')
    {
        blink_line.style.visibility='visible';
    }
    else{
        blink_line.style.visibility='hidden';
    }

}
setInterval(function(){d_block();}, 1000);

</script>

Upvotes: 1

Jesse Hattabaugh
Jesse Hattabaugh

Reputation: 7966

This can be achieved with CSS3 like so

@-webkit-keyframes blink {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.0;
    }
}
blink {
    -webkit-animation-name: blink;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 1s;
}

It even has a nice fade effect. Works fine in Safari, but Chrome cries a little on the inside.

Upvotes: 43

Wolf
Wolf

Reputation: 11

Works in IE 10, Firefox 23.0.1, Google Chrome 29.0, Opera 16.0

blink(0.7);

function blink(speed) {

    if (speed) {
        if (document.getElementsByTagName('blink')) 
            setInterval("blink()", speed*2000);

        return; 
    }

    var blink = document.getElementsByTagName('blink');

    for (var i=0; i<blink.length; i++) {
        blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : "";
    }
}

Upvotes: 1

Laukhin Andrey
Laukhin Andrey

Reputation: 149

var el = $(".blink");
setInterval(function() {el.toggle()}, 500);

Upvotes: 4

zpon
zpon

Reputation: 1530

Simple jquery implementation, feel free to extend to fit your needs http://jsfiddle.net/L69yj/

var element = $(".blink");
var shown = true;
setInterval(toggle, 500);

function toggle() {
    if(shown) {
        element.hide();
        shown = false;
    } else {
        element.show();
        shown = true;
    }
}

Upvotes: 2

bkellgren
bkellgren

Reputation: 211

The truly cross browser / legacy browser blink tag...

HTML

<!DOCTYPE html>
<html>
<blink>ULTIMATE BLINK TAG!</blink>

<!--[if lt IE 10]>
<script>

toggleItem = function(){
    var el = document.getElementsByTagName('blink')[0];
    if (el.style.display === 'block') {
        el.style.display = 'none';
    } else {
        el.style.display = 'block';
    }
}

setInterval(toggleItem, 1000);

</script>
<![endif]-->

</html>

CSS

blink {
  -webkit-animation: blink 1s steps(5, start) infinite;
  -moz-animation:    blink 1s steps(5, start) infinite;
  -o-animation:      blink 1s steps(5, start) infinite; 
  animation:         blink 1s steps(5, start) infinite;
}

@-webkit-keyframes blink {
  to { visibility: hidden; }
}
@-moz-keyframes blink {
  to { visibility: hidden; }
}
@-o-keyframes blink {
  to { visibility: hidden; }
}
@keyframes blink {
  to { visibility: hidden; }
}

Upvotes: 11

Prakash
Prakash

Reputation: 6602

Try this jQuery

function blinks(hide) {
    if (hide === 1) {
        $('.blink').show();
        hide = 0;
    }
    else {
        $('.blink').hide();
        hide = 1;
    }
    setTimeout("blinks("+hide+")", 400);
}

$(document).ready(function(){
    blinks(1);
});

Note : include the jquery file and give a class name 'blink' on element which you want to blink.

Tip: .show() and .hide() doesn't not reserve the width and height of the element... If you need to hide the element, but not his place (dimentions) at the document, use .css("visibility", "hidden or visible") instead.

Upvotes: 1

asselsolutions
asselsolutions

Reputation: 1

You can also use this:

function blinkIt() {
    if (!document.all) return;
    else {
        for(i=0;i<document.all.tags('blink').length;i++){
            s=document.all.tags('blink')[i];
            s.style.visibility=(s.style.visibility=='visible') ?'hidden':'visible';
        }
    }
}

You may use a timer instead of using the tag. I have tested this on IE7 and Firefox. Both browsers allow this, however Chrome doesn’t work properly. Hope you got the answer.

Upvotes: 0

Related Questions