yongsing
asked on
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.
ASKER
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.
An example would be appreciated.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I suggest to use a Gif file if necessary here. cheers
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!
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!
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>
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')
//-->
</script>
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','sto p');
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='+op ac+');-moz -opacity:' +opac/100+ ';';
// document.getElementById('d ebugShow') .innerText = myFilt;
document.getElementById(wh ereId).sty le.filter = myFilt;
if (typeof stopper == 'undefined') {
setTimeout('fadeBlink(\''+ whereId+'\ ')', timeDelay);
} else {
opac = max;
fadeDir=0;
var myFilt='alpha(opacity='+op ac+');-moz -opacity:' +opac/100+ ';';
document.getElementById(wh ereId).sty le.filter = myFilt;
}
}
</script>
</head>
<body onLoad="fadeBlink('blinkTh is');">
<div id="blinkThis"><b>Please wait while we process your request</b></div>
<div id="debugShow"></div>
</body>
</html>
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','sto
function fadeBlink(whereId,stopper)
if (fadeDir==1) {opac+=fadeStep}else{opac-
if (opac==max || opac==min) fadeDir=(fadeDir==0)?1:0;
var myFilt='alpha(opacity='+op
// document.getElementById('d
document.getElementById(wh
if (typeof stopper == 'undefined') {
setTimeout('fadeBlink(\''+
} else {
opac = max;
fadeDir=0;
var myFilt='alpha(opacity='+op
document.getElementById(wh
}
}
</script>
</head>
<body onLoad="fadeBlink('blinkTh
<div id="blinkThis"><b>Please wait while we process your request</b></div>
<div id="debugShow"></div>
</body>
</html>
Hmm.. That doesn't work in either IE or FF. Nothing changes.
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','sto p');
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='+op ac+')';
var divObj = document.getElementById(wh ereId).sty le;
divObj.opacity = (opac/100);
if(opac == 100){divObj.MozOpacity = ((opac - 1) / 100);}else{divObj.MozOpaci ty = (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.MozOpaci ty = (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('blinkTh is');">
<div id="blinkThis" class="divbox"><b>Please wait while we process your request</b></div>
</body>
</html>
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','sto
function fadeBlink(whereId,stopper)
if (fadeDir==1) {opac+=fadeStep}else{opac-
if (opac==max || opac==min) fadeDir=(fadeDir==0)?1:0;
var myFilt='alpha(opacity='+op
var divObj = document.getElementById(wh
divObj.opacity = (opac/100);
if(opac == 100){divObj.MozOpacity = ((opac - 1) / 100);}else{divObj.MozOpaci
divObj.filter = myFilt;
if (typeof stopper == 'undefined') {
setTimeout('fadeBlink(\''+
} else {
opac = max;
fadeDir=0;
divObj.opacity = (opac/100);
if(opac == 100){divObj.MozOpacity = ((opac - 1) / 100);}else{divObj.MozOpaci
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('blinkTh
<div id="blinkThis" class="divbox"><b>Please wait while we process your request</b></div>
</body>
</html>
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
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
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(la
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')
//-->
</script>
</BODY>
</HTML>
pravinasar, my example is cross browser and uses the visibility option too. Please don't just duplicate existing answers.
Much better on the fade in/out.
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
Peace and joy. mvan
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.
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.
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
https://www.experts-exchange.com/expertAwards2006.jsp#javasc
https://www.experts-exchange.com/M_3560142.html
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
https://www.experts-exchange.com/expertAwards2006.jsp#javasc
https://www.experts-exchange.com/M_3560142.html
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.
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.
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.