Blinking Text

I tried to use the <blink> tag to show blinking text, but it's not working. Any other way to do so? Thanks.
LVL 9
yongsingAsked:
Who is Participating?
 
Richard QuadlingConnect With a Mentor Senior Software DeveloperCommented:
<html>
<head>
<title>Example of flashing text</title>
<script type="text/javascript">
var i_state = 1; // Set the initial state

function alterstate()
 {
 if (i_state == 1)
  {
  i_state = 2;
  document.getElementById('blink').style.visibility = "hidden";
  }
 else
  {
  i_state = 1;
  document.getElementById('blink').style.visibility = "visible";
  }
 setTimeout("alterstate();", 100);
 }
</script>
</head>
<body onLoad="alterstate();">
<span id="blink">Please wait while we process your request...</blink>
</body>
</html>

Tested in IE6 and FF1.5
0
 
Richard QuadlingSenior Software DeveloperCommented:
Hi yongsing,


A timer to change the colour, but can you guess why the blink tag isn't supported? It's AWFUL! And for those who get headaches from flashing lights, you could drive some poor user away from the page VERY VERY quickly!

Regards,

Richard Quadling.
0
 
yongsingAuthor Commented:
No choice, our client wants a blinking "Please wait while we process your request..." message when a form is submitted.

An example would be appreciated.
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
Ryan ChongCommented:
I suggest to use a Gif file if necessary here. cheers
0
 
Richard QuadlingSenior Software DeveloperCommented:
Oh good idea. Personally, I HATE flashing. At least straight on/off. But a nicely animated please wait LOOKS a whole lot nicer.

If you use windows, you'll be familiar with the search light animation. Just imagine that flashed "PLEASE WAIT". Your head would explode in a few minutes, I'm sure!
0
 
Pravin AsarPrincipal Systems EngineerCommented:
This does a simulate blinking by turning on/off the visibility.
With is you can adjust the blinking time interval.

<div id = "text1" style = "position:absolute; visibility:hidden">Please wait while we process your request</div>


<script language="javascript">
<!--
delay = 500;

function blink(layer) {
     vis = layer.style.visibility;
     if (vis == "visible") vis = "hidden";
     else vis = "visible";
     layer.style.visibility = vis;
     tstring = "blink(\""+layer+"\")";
     setTimeout(tstring, delay);
     }
// Usage onclick
setTimeout("blink('text1')", 500);

//-->
</script>
0
 
mvan01Commented:
If you don't like flashing or blinking, how about fading in and out?

Peace and joy.  mvan


<html>
<head>
<title>Fade Blinker</title>

<script language="JavaScript" type="text/javascript">

var timeDelay=100;  // mseconds per step
var fadeDir=0;          // fading in, or out, direction
var fadeStep=10;      // % step size
var max=100;
var min=0;
var opac=max;

// call with added 2nd parameter to stop the blinking
// like this:  fadeBlink('someDivId','stop');

function fadeBlink(whereId,stopper) {
   if (fadeDir==1) {opac+=fadeStep}else{opac-=fadeStep}
   if (opac==max || opac==min) fadeDir=(fadeDir==0)?1:0;
   var myFilt='alpha(opacity='+opac+');-moz-opacity:'+opac/100+';';
   // document.getElementById('debugShow').innerText = myFilt;
   document.getElementById(whereId).style.filter = myFilt;
   if (typeof stopper == 'undefined') {
      setTimeout('fadeBlink(\''+whereId+'\')', timeDelay);
   } else {
      opac = max;
      fadeDir=0;
      var myFilt='alpha(opacity='+opac+');-moz-opacity:'+opac/100+';';
      document.getElementById(whereId).style.filter = myFilt;
   }
}

</script>

</head>
<body onLoad="fadeBlink('blinkThis');">

<div id="blinkThis"><b>Please wait while we process your request</b></div>

<div id="debugShow"></div>

</body>
</html>
0
 
Richard QuadlingSenior Software DeveloperCommented:
Hmm.. That doesn't work in either IE or FF. Nothing changes.

0
 
mvan01Commented:
Sorry  :-( , but this is better :-)  ...

Peace and joy.  mvan


<html>
<head>
<title>Fade Blinker</title>

<script language="JavaScript" type="text/javascript">

var timeDelay=100;  // mseconds per step
var fadeDir=0;          // fading in, or out, direction
var fadeStep=5;      // % step size
var max=100;
var min=0;
var opac=max;

// call with added 2nd parameter to stop the blinking
// like this:  fadeBlink('someDivId','stop');

function fadeBlink(whereId,stopper) {
   if (fadeDir==1) {opac+=fadeStep}else{opac-=fadeStep}
   if (opac==max || opac==min) fadeDir=(fadeDir==0)?1:0;
   var myFilt='alpha(opacity='+opac+')';
   var divObj = document.getElementById(whereId).style;
   divObj.opacity = (opac/100);
   if(opac == 100){divObj.MozOpacity = ((opac - 1) / 100);}else{divObj.MozOpacity = (opac/100);}
   divObj.filter = myFilt;
   if (typeof stopper == 'undefined') {
      setTimeout('fadeBlink(\''+whereId+'\')', timeDelay);
   } else {
      opac = max;
      fadeDir=0;
      divObj.opacity = (opac/100);
      if(opac == 100){divObj.MozOpacity = ((opac - 1) / 100);}else{divObj.MozOpacity = (opac/100);}
      divObj.filter = myFilt;
   }
}

</script>

<style>
.divbox
{
     position:absolute;
     opacity:100;
     -moz-opacity:100;
     filter:alpha(opacity=100);
     border:1px dotted red;    
}

</style>

</head>
<body onLoad="fadeBlink('blinkThis');">

<div id="blinkThis" class="divbox"><b>Please wait while we process your request</b></div>

</body>
</html>
0
 
mvan01Commented:
P.S. Now has cross-browser support.

Fiddle with these two to adjust the rate and so the effect:

var timeDelay=100;  // mseconds per step
var fadeStep=5;      // % step size

Peace and joy.  mvan
0
 
Pravin AsarPrincipal Systems EngineerCommented:

Here is complete example

<HTML>
<HEAD>
<TITLE>My Blinking Text</TITLE>
</HEAD>
<BODY>
<div id = "text1" style = "position:absolute; visibility:hidden">Please wait while we process your request</div>


<script language="javascript">
<!--
delay = 500;

function blink(layer) {
     obj = document.getElementById(layer);
     vis = obj.style.visibility;
     if (vis == "visible") vis = "hidden";
     else vis = "visible";
     obj.style.visibility = vis;
     tstring = "blink(\""+layer+"\")";
     setTimeout(tstring, delay);
     }
// Usage onclick
setTimeout("blink('text1')", 500);

//-->
</script>
</BODY>
</HTML>
0
 
Richard QuadlingSenior Software DeveloperCommented:
pravinasar, my example is cross browser and uses the visibility option too. Please don't just duplicate existing answers.
0
 
Richard QuadlingSenior Software DeveloperCommented:
Much better on the fade in/out.
0
 
mvan01Commented:
Thanks!  Dunno what happened on the first try.  The second is OK, tho I can't try it cross-browser at my current location.

Peace and joy.  mvan
0
 
Richard QuadlingSenior Software DeveloperCommented:
If you download FireFox (it is REALLY small and a LOT faster than IE) and then download 2 extensions (IE-Tab and IE-View), you can then click 1 icon on FF to change the rendering engine used between FF and IE. What I tend to do for my development is use FF with 2 tabs. 1 in FF and the other as IE. Switch between the two is just 1 click and you can refresh both by right clicking a tab and saying refresh all. VERY easy. Very clean.

Add to that the Tidy HTML Validation extension and you are told how many errors/warnings are wrong with the code.

For example, this page has no errors but 154 warnings.

Things like unescaped &, missing </div>, <img> lacks alt attribute, etc.

You can even add in User Accessibility compliance! VERY useful for professional sites as a simple/quick check.

0
 
Pravin AsarPrincipal Systems EngineerCommented:
RQuadling,


It always happens people post similar answers.

Definitely I did not copy (and never copy) anybody's answers.

On the other hand, I find some  guys copying my code, and selling as there.  Since ee is a public forum, that always happens, but difficult to prove.


I think I know enough javascript  to post my original answers.

Visit
http://www.experts-exchange.com/expertAwards2006.jsp#javasc

http://www.experts-exchange.com/M_3560142.html
0
 
Richard QuadlingSenior Software DeveloperCommented:
No, sorry. I didn't mean to imply you copied my answer. Your answer used the same technique as mine and THAT is what I was commenting on.

But well done on your award! I'm a PHP guy. Been top of the PHP 4 Windows for a while and didn't get an award. Boo Hoo.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.