Make Text Blink Using Javascript

For those who miss the old HTML blink tag, there are a couple of ways to get it back.

The following code is meant to be copied and pasted. It's not the best teaching code. It's only in the Beginners' section because I accidently put it here :)

The first script will work on Windows Internet Explorer and Firefox.

Begin Copy and Paste Code:

<script type="text/javascript">
<!--
spe=500;
na=document.all.tags("blink");
swi=1;
bringBackBlinky();

function bringBackBlinky() {

if (swi == 1) {
sho="visible";
swi=0;
}
else {
sho="hidden";
swi=1;
}

for(i=0;i<na.length;i++) {
na[i].style.visibility=sho;
}

setTimeout("bringBackBlinky()", spe);
}
-->
</script>

We are having a <blink>good</blink> time. Simply the <blink>BEST!!!</blink>

End Copy and Paste Code:


-We set the speed in our spe variable to half a second (500 milliseconds).
-We store all blink tags on the page into our array variable na.
-We set our variable swi to 1 to start things off.
-We call our Blinky function.
-We write our function...
---If our var swi equals 1, set it to 0 and set our variable sho to "visible".
---The next time our function is called, swi will be set to 0 and the next condition will execute.
---Our next condition says set swi back to 1, and set sho to "hidden".

-Now we get clever by looping for each <blink> tag (na.length has that value)
-We use our variable i as the index number of our array na.
-We use Javascript's built-in style method and set the visibility property to our variable sho.
-The sho variable will toggle back and forth between "hidden" and "visible" each time it is called when we...
-Use setTimeout to call our function again with our spe variable plugged in.

NOTE: The for loop is changing all the <blink> tags on the page to visible or hidden.

I warned it wasn't good learning code :)


To make some text blink in Safari AND Windows IE, you are sort of limited, but I did come up with a little snippet that works for one word...

INTERRUPT: I couldn't accept that I couldn't make it work for both, so I dug in some more and came up with a way to make it work. SO NOW, the above example will work with <blink> tags, the following example will work with name tags, <a name=mi>, substituting mi for whatever your HTML name attributes are set to. Then just set the NameOfYourTags variable in the top of the script.

NOTE: To make it work for Safari, the script needs to come AFTER the text, otherwise the tags are not grabbed by Javascript's getElementByName.


Begin Copy and Paste Code:

We are having a <a name=mi>good</a> time. Simply the <a name=mi>BEST</a>!!!

<script type="text/javascript">
<!--

spe=500;
NameOfYourTags="mi";

swi=1;
na=document.getElementsByName(NameOfYourTags);

bringBackBlinky();

function bringBackBlinky() {

if (swi == 1) {
sho="visible";
swi=0;
}
else {
sho="hidden";
swi=1;
}

for(i=0;i<na.length;i++) {
na[i].style.visibility=sho;
}

setTimeout("bringBackBlinky()", spe);
}
-->
</script>

End Copy and Paste Code:


-This is essentially the same script as above except the second line where we grab the page elements with getElementsByName instead of document.all.tags which doesn't work in Safari.


Resources:
Make a Link Using Javascript
Bold Text in Javascript
Italics in Javascript
Redirect in Javascript
Change Fonts in Javascript
Change Font Size in Javascript

HTML Tags
HTML Color Chart
HTML Codes



Click HERE to comment or discuss at iLoveTheCode GOOGLE Group

Previous Article: Make a String into a Link in Javascript

Next Article: Javascript Subscript Text

Struts 2 in Action Don Brown, Chad Da... New $29.69	jQuery in Action Bear Bibeault, Yeh... New $26.39	CSS David McFarland New $23.09
Learning Web Design Jennifer Niederst ... New $29.69	Bulletproof Web Design Dan Cederholm New $26.39	JavaScript David Flanagan New $31.49
Creating Web Sites Matthew MacDonald New $19.77	Dreamweaver CS3 David McFarland New $29.69	HTML, XHTML, and CSS, Sixth Edition ... Elizabeth Castro New $23.09

Privacy Information