Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Blinking Text

Posted on 2006-05-24
17
Medium Priority
?
798 Views
Last Modified: 2010-08-05
I tried to use the <blink> tag to show blinking text, but it's not working. Any other way to do so? Thanks.
0
Comment
Question by:yongsing
  • 8
  • 4
  • 3
  • +2
17 Comments
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16749817
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
 
LVL 9

Author Comment

by:yongsing
ID: 16749913
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
 
LVL 40

Accepted Solution

by:
Richard Quadling earned 120 total points
ID: 16749956
<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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 54

Expert Comment

by:Ryan Chong
ID: 16750066
I suggest to use a Gif file if necessary here. cheers
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16750076
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16750140
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
 
LVL 11

Expert Comment

by:mvan01
ID: 16751743
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
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16751790
Hmm.. That doesn't work in either IE or FF. Nothing changes.

0
 
LVL 11

Expert Comment

by:mvan01
ID: 16751989
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
 
LVL 11

Expert Comment

by:mvan01
ID: 16752005
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16752007

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
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16752016
pravinasar, my example is cross browser and uses the visibility option too. Please don't just duplicate existing answers.
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16752035
Much better on the fade in/out.
0
 
LVL 11

Expert Comment

by:mvan01
ID: 16752051
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
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16758504
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16759841
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
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16759949
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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question