5

I'm working on a project to create a website for our CS faculty. There's one problem though. We want certain elements on the page highlighted in a meaningful manner. The solution must be cross-browser (i.e. must work in IE).

Thus, a question:

How to emulate blink (works perfectly in IE6) in modern browsers (think Chrome)?

Update: I've found this jQuery plugin to do the blinking, but we don't use jQuery and would prefer a CSS3 fallback for modern browsers.

Community
  • 1
  • 1
katspaugh
  • 17,449
  • 11
  • 66
  • 103
  • 6
    [Blink](https://developer.mozilla.org/en/HTML/Element/blink) works in Chrome 20. Why do you want to use it? It does not add any value, and it's looks very annoying. – Rob W Jul 09 '12 at 11:03
  • 9
    Are you trolling, or does someone in your faculty really think that `blink` would be a meaningful way to highlight elements? – BoltClock Jul 09 '12 at 11:04
  • @RobW, it's in the style guide for our uni. Doesn't work in Safari (tried `[].forEach.call(document.querySelectorAll('h1'), function (item) { item.innerHTML = item.textContent.blink(); });`). – katspaugh Jul 09 '12 at 11:06
  • 2
    See also [What is the replacement for a blinking text in a web page?](http://stackoverflow.com/questions/1211044/what-is-the-replacement-for-a-blinking-text-in-a-web-page). – lhf Jul 09 '12 at 11:19
  • 1
    @BoltClock, not trolling. Just trying to degrade gracefully. – katspaugh Jul 09 '12 at 12:54

5 Answers5

9

I wonder why no one has suggested CSS3 Animations:

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.blink {
  animation: blink 600ms infinite;
}

Demo on JSBin.

katspaugh
  • 17,449
  • 11
  • 66
  • 103
7

You can just use CSS text-decoration property for that purpose:

For example:

span {
    text-decoration: blink;
}

Let all span nodes blink.. blink.. blink.. blink..

jAndy
  • 231,737
  • 57
  • 305
  • 359
  • 3
    This does not work in IE/Chrome/Safari. It only works in Firefox/Opera. See https://developer.mozilla.org/en/CSS/text-decoration#Values – uınbɐɥs Jul 09 '12 at 11:23
  • @ShaquinTrifonoff, thank you. That's disappointing. Maybe someone should provide a universal solution. – katspaugh Jul 09 '12 at 11:28
  • 1
    @ShaquinTrifonoff: you're right. However, combining `` and a `css class` should cover some browsers. Interesting tho, that chrome and safari actually offer the option of `blink` for text-decoration, but just ignore it. – jAndy Jul 09 '12 at 11:29
  • 4
    `text-decoration: blink` is part of the standard (and is not going away); browsers are simply given the permission to not actually blink the text, for obvious reasons. – BoltClock Jul 09 '12 at 11:44
  • This is currently disabled in every major browser: Firefox 23, Opera 15 removed it, and it's not available on Safari and Chrome according https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration. – Dereckson Mar 28 '15 at 22:46
  • @Dereckson No reason to downvote this answer. It is almost 3 years old, at the time this was written, it was correct and true. – jAndy Mar 28 '15 at 23:34
  • The question is still available, and in 2015, this answer isn't interesting anymore, and we should instead promote another answer, like the CSS3 animations one. Maybe could you edit your answer to note the historical state of the information given? – Dereckson Mar 29 '15 at 01:12
4

Here's some JavaScript to emulate <blink>:

var blink = (function () {
  var elems;

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

  this.start = function () {
    elems = document.getElementsByClassName('blink');
    setInterval(blink, 500);
  };

  return { start: start };
}());

addEventListener('load', blink.start);

CodePen demo

Just add the class blink to any element.

uınbɐɥs
  • 7,236
  • 5
  • 26
  • 42
  • @pbwned The website's not active any more, so Dot TK took over the domain. You can see what the link used to be in the [Internet Archive](http://web.archive.org/web/20131013082646/http://shaquin.tk/experiments/blink.html) – uınbɐɥs Jun 03 '15 at 22:48
2

You don't have to make a class. Use the traditional tag and simply add CSS for it.

Via Straight CSS:

/* Standard (Mozilla) */
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
/* Chrome & Safari */
@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }
blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; }

Straight CSS Added Via JS

if ("[object HTMLUnknownElement]" === Object.prototype.toString.call(document.createElement('blink'))) {
    var head = document.head || document.getElementsByTagName("head")[0],
        style = document.createElement("style");
    /* Standard (Mozilla) */
    style.appendChild(document.createTextNode("@keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    /* Chrome & Safari */
    style.appendChild(document.createTextNode("@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    style.appendChild(document.createTextNode("blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; text-decoration: blink; }"));
    head.appendChild(style);
}


/* Standard (Mozilla) */
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
/* Chrome & Safari */
@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }
blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; }
<p><blink>I Blink</blink></p>
<hr />
<p><noblink>I don't</noblink></p>
SpYk3HH
  • 22,272
  • 11
  • 70
  • 81
1

just a remark : if you want to "blink" a link, it's better to change the color of the blinked text instead of hiding it because when it's hidden you can't click on it and so it's become a game to try to click on the link :-)

function toggleBlink() {
    for(var i = 0; i < blinkers.length; i++) {
        if(blinkers[i].style.color == 'red') {
            blinkers[i].style.color = 'white';
        } else {
            blinkers[i].style.color = 'red';
        }
    }
}

// "white" is the color of my background

Raidge
  • 11
  • 1