emulate <blink> tag

[PHP Guru]

I know some of you might know of its existance, however the <blink> tag does not work in Internet Explorer, and to my knowledge you cannot control its time intervals. Hopefully this little script will prove worthy:

It should just go in your header:

<script type="text/javascript">
<!--
// interval length (in seconds)
var intervalLength = .5;
function emulateBlink() {
 objs = document.getElementsByTagName("span");
 for(x = 0; x < objs.length; x++) {
  if(objs[x].getAttribute("blink") == "blink") {
   if(objs[x].style.visibility == "hidden") {
	objs[x].style.visibility = "visible";
   } 
   
   else {
	objs[x].style.visibility = "hidden";
   }
  }
 }
 window.setTimeout("emulateBlink();",(intervalLength * 1000));
}
if(document.getElementsByTagName) {
 emulateBlink();
}
-->
</script>

Basically, in order to use it, just do something like this:

<span blink="blink">this is blinking text!</span>

And that's it

I didn't think this should go in user submitted tutorials, simply because it isn't really a tutorial, it's just a javascript. But if you think it must belong there, then feel free to do what you think is best

[Calidris]

Slight problem... there's no such thing as a blink attribute so it wouldn't validate against any W3C standards. Using class="blink" would be more appropriate

[PHP Guru]

I thought of that... and now I can't justify why I didn't do that... lol. I will alter the script

For some reason, when using the class attribute, it does not work. However, when I plugin the id attribute, it works just as expected. However, if you wanted more than one blinking thing, it would be politically incorrect to use that ID twice. So I decided to just use the name attribute instead.

Here's the new script, since I cannot edit my old post:

<script type="text/javascript">
<!--
// interval length (in seconds)
var intervalLength = .5;
function emulateBlink() {
objs = document.getElementsByTagName("span");
for(x = 0; x < objs.length; x++) {
if(objs[x].getAttribute("name") == "blink") {
if(objs[x].style.visibility == "hidden") {
	objs[x].style.visibility = "visible";
} 
 
else {
	objs[x].style.visibility = "hidden";
}
}
}
window.setTimeout("emulateBlink();",(intervalLength * 1000));
}
if(document.getElementsByTagName) {
emulateBlink();
}
-->
</script>

And you would want to use this to get something to blink:

<span name="blink">Blinking stuff</span>

[Calidris]

The name of an element is also a unique identifier, only used to group objects in the context of an HTML form (e.g. radio buttons have the same name).

To get the class of an element you should use element.className and also note the annoying fact that some people might have two class names, so you would have to split the className up by spaces and check if any of the given class names match "blink" (or I've seen the same effect done with regexp too).

I was curious and ran a little experiment to see how simply using <blink> tags effects your script (and making IE apply itself). This works just fine, although Mozilla will do a double-blink kind of effect due to trying to apply two different blink styles (the built in one and your script). To fix this you could surround your script in IE conditional comments *shrugs* I'm just bored, can you tell? lol

[PHP Guru]

Originally Posted by Calidris

The name of an element is also a unique identifier, only used to group objects in the context of an HTML form (e.g. radio buttons have the same name).

To get the class of an element you should use element.className

Good call

<script type="text/javascript">
<!--
// interval length (in seconds)
var intervalLength = .1;
function emulateBlink() {
 objs = document.getElementsByTagName("span");
 for(x = 0; x < objs.length; x++) {
  if(objs[x].className == "blink") {
   if(objs[x].style.visibility == "hidden") {
	objs[x].style.visibility = "visible";
   } 
   
   else {
	objs[x].style.visibility = "hidden";
   }
  }
 }
 window.setTimeout("emulateBlink();",(intervalLength * 1000));
}
if(document.getElementsByTagName) {
 emulateBlink();
}
-->
</script>

And...

<span class="blink">something</span>

and also note the annoying fact that some people might have two class names, so you would have to split the className up by spaces and check if any of the given class names match "blink" (or I've seen the same effect done with regexp too).

Instead of...

<span class="blink red green">

You would use:

<span class="blink"><span class="red green">

It's the responsibility of the coder to write it like that ...

I was curious and ran a little experiment to see how simply using <blink> tags effects your script (and making IE apply itself). This works just fine, although Mozilla will do a double-blink kind of effect due to trying to apply two different blink styles (the built in one and your script). To fix this you could surround your script in IE conditional comments *shrugs* I'm just bored, can you tell? lol

If you were using this script, why would you use it in conjunction with the <blink> tag? Also, with the <blink> tag you can't specify intervals