Jump to content

blink not working on IE


houssam_ballout

Recommended Posts

Guest FirefoxRocks

The correct way to display blinking text is through CSS, but even that doesn't work with Internet Explorer. Blinking text is an accessibility hazard as they are distracting and can trigger seizures in some people. If you must use blinking text, use JavaScript.

Link to comment
Share on other sites

There is text-decoration:blink; in CSS, but I don't know how well it works cross-browser.

Link to comment
Share on other sites

The CSS text-decoration:blink; does work in FireFox, but has no effect in Internet Explorer.Blinking text is actually (thinking logically) a script thing, and should not be able to accomplished by CSS or html.The very best option to blink text is to script it with javascript, to have full control over what colors are used. If you use colors that do not have much contrast between them, the impact on the viewer will be greatly reduced. Using CSS you cannot do that. :)You can use very simple scripts like this:

<!-- java script: --><script type="text/javascript">function GoBlink(){  objBlink = document.getElementById("blinker");   if (objBlink.style.color == "#ff0000")   {  objBlink.style.color = "#ff00ff";   }  else   {  objBlink.style.color = "#ff0000";   }  setTimeout('GoBlink()', 1000);}</script><!-- html: --><p id="blinker">test!!! blablabla</p><button type="button" onclick='GoBlink()'>Start blinking...</button>

Link to comment
Share on other sites

God, why would you want to make text blink? Is it 1998 again?
How's this: to provide TEMPORARY feedback during an AJAX procedure. Say you want to save some data to the server. You click on a save button and nothing happens. You're worried. Did it take? Now imagine the word "Save" changes to "Saving . . ." and blinks until the backend function gets a response, maybe 1-2 seconds later. Then the word changes back to "Save."That's pretty harmless.Actually, the app I'm working on does the same thing without the blink. When the save is complete, the menu item dims, just like in a real app.But I thought I'd play the devil's advocate. biggrin.gif
Link to comment
Share on other sites

I'd used this javascript and it works:<script><!--function doBlink() { var blink = document.all.tags("BLINK") for (var i=0; i<blink.length; i++) blink.style.visibility = blink.style.visibility == "" ? "hidden" : "" }function startBlink() { if (document.all) setInterval("doBlink()",1000)}window.onload = startBlink;// --></SCRIPT>

Link to comment
Share on other sites

You could better turn to using a DIV element, and make this script cross-browser, like this :)

<div class="blinker">Blinking text</div>

<script type="text/javascript"><!--function doBlink(){ var blinks = document.getElementsByTagName("div");  for (var i=0; i<blinks.length; i++)  { if (blinks[i].classname != "blinker") { continue; }	 blinks[i].style.visibility = (blinks[i].style.visibility == "") ?"hidden" :"";  }}function startBlink(){ setInterval("doBlink()",1000);}window.onload = startBlink;// --></script>

This makes the code work in all browsers, while it has no browser dependant functionality and still does the blinking effect. :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...