Blinking Form Text Box Effect - Tested in IE 7.0, Netscape 8.1.3, Opera 9.21, Firefox 2.0.0.4, AOL Explorer 1.5 and Safari 3.0

Name:
E-mail:

This script will place the cursor in a designated textbox, causing its background to blink a specified color for a pre-determined amount of seconds. This will highlight the textbox on the Web page in order to draw attention to it. If you would like to see this effect again, [ Reload Page ].

We have tested the code in IE 7.0, Firefox 2.0.0.4, Opera 9.21, Netscape 8.1.3, AOL Explorer 1.5 and Safari 3.0. This script worked well in all platforms with no variations observed.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> and <BODY> sections (incorporated into a working form) of your document. It also makes use of an external .js file you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

There are a few reconfigurations you can make to the external.js file. These changes are for the color, how long a period the text box blinks, the rate of flash and the form element you want this effect to be associated with. See below where and howto.

window.Blink = function(args){
// Set the color and seconds below, e.g., [args,'COLOR',SECONDS]
args = (/,/.test(args))? args.split(/,/): [args,'#FFD100',10];
var who = document.getElementById(args[0]);
var count = parseInt(args[2]);
if (--count <=0) {
who.style.backgroundColor = '';
if(who.focus) who.focus();
} else {
args[2]=count+'';
who.style.backgroundColor=(count%2==0)? '': args[1];
args='\"'+args.join(',')+'\"';
setTimeout("Blink("+args+")",500);

We have deleted some code for no other reason than for this tutorial it is not needed.

}
}
}

addLoadEvent(function() {
// Set the field name below of where to place the focus and blinking color
Blink('name');
});

#FFD100 This denotes the color that will be seen inside the form element flashing.
10 This denote for how long a period the flashing will continue. The higher the number the longer the flashing.
500 This denotes the rate of flash. How long a period between flashes. The higher the number the faster the rate of flash.
Blink('name') This denotes what element within the <BODY> section (that you incorporate into a working form) that is named as the recipient of this flashing/blinking action. See below for further clarification.



<td width="50"><b>Name:</b></td>
<td width="300"><input id="name" type="text"></td>
</tr><tr>
<td width="60">E-mail:</td>
<td width="300"><input id="email" type="text"></td>
In other words whatever element you want the effect to be associated with, you need to change the code to the left to reflect what element in the form itself you want to flash. If you would want the email to be flashing, then reflect that change in the code to the left. You can have this effect in any "one" element you want. Just adjust (name) the form element itself to reflect this.

If this is still slightly unclear, we will elaborate a little more. For example, lets say you have a form with numerous text elements and you want a certain one to be noticed first. Just name this element whatever you want and place that name in the external.js file above and replace the word "name" with whatever you have named that particular form element to bring focus upon. Grab the below link for a more visual aid to clarify this point.
[ More Clarification ]

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code
<script type="text/javascript" src="blinkingTextboxEffect.js">
</script> Traditional Copy/Cut and Paste
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

// End -->
</script>

External .js file

Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

If you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

O nce you have completed either of the above steps for the <HEAD> section, all that is left is to incorporate the <BODY> section of code into a valid functioning form.

Point Of Information This effect does bring to bear the function of focusing on the element that is defined within this script. In other words, no matter where within this page the form is located, it (the page) would open to focus (to that section of page) on the element you have defined within the script.

On the page you are going to have this effect on or any page that will link to the page with this effect, be sure of one thing within either the linking URL or the URL this effect is on. Do Not have the backslash-forward slash / (whichever you call it) at the end of the URL or linked to URL. If you do, the effect Will Not Work!. If this sounds confusing, see the below example:

Right Way: https://www.angelfire.com/ny5/consigliere/blinkingtextbox.html
Wrong Way: https://www.angelfire.com/ny5/consigliere/blinkingtextbox.html/

S elect the links above to see what we are explaining about the Right and Wrong URL address.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]