Number Pronunciator ~ Tested in IE6.0, Netscape7.02, Netscape8.0.4, Opera8.51, Firefox1.0.7 and AOL Explorer1.2

E nter a number and this script will write it out in plain English. Your number can be up to 303 digits long.

W e have tested the code in IE6.0, Firefox1.0.7, Opera8.51, Netscape7.02, Netscape8.0.4 and AOL Explorer1.2. This script worked well in all platforms with one variation observed in Firefox1.0.7, Opera8.51, Netscape7.02 and Netscape8.0.4.

The textarea form box itself did not adhere to the confines of the defined area within the script itself.
In other words, it was longer that it should be in relation to the script coding.
This in no way hampered the operation of the script itself. It still worked as it should.
This is just a cosmetic inconsistency associated with those browser platforms.

D epending on your knowledge of HTML and javascripts, this is an easy one part copy and paste code that goes in the <BODY> section of your document wherever you want it to appear. It has no visible reconfigurations* other than the size of the form itself.

* There are no reconfigurations to be made to the code itself but.........if you enter a large number to be pronounced, you will notice that the material below the effect moves to compensate for the added text. A workaround for this little annoyance and to boost the level of professionalism of your site, is to place this effect on a separate page and then place it inside an "I" frame* on the page you want the effect to appear. This will solve the problem of the material below your effect moving to compensate for the larger numbers inserted. If you would grab the below link, you will see what we are talking about having the material move below the effect to compensate for the added text.
[ Number Pronunciator ~Default ]
* If you do not fully understand "I" frames, further down we shall explain the howto on them.
[ I Frames Explained ]

A s we said earlier, the only basic reconfiguration is that of the size of the form itself. See below:

Default Configuration

<fieldset>
<legend> Number Pronunciator </legend>
<div style="padding: 10px;">
<input name="num" type="text" value="100" style="font-family:Tahoma;font-size:8pt;width:200px;" maxlength="315">

Definitions of different Reconfigurations

width:200px This denotes how wide the entire effect will be. You can change the px to that of a % if you want it to appear uniform in the different size monitors that view this effect.

Not every monitor has the same size viewing area so......by using the % means that it will appear as the same percentage in relation to whatever size monitor is viewing the effect.

If you are to use the % as opposed to px size, "Do Not" add it into an IFrame. Making use of the % causes conflicts between the settings within the Iframe and the settings within the effect itself.

value="100" This is what is seen inside the form box

These configurations are all to your personal taste and how it looks on your site. Just play around with these until you get the combination that works for you.

Little Extra Not Included In The Script:
If you notice in our example, the words when clicked disappears. This is not part of the script but is called "Automatic Form Field Clearing" effect. If you would like to add this little trick into the script, it is quite easy. It is a two part copy and paste code that goes in the <HEAD> section and the other part goes directly into the form box itself. See below:

T he second or last part, as we said goes directly into the form box itself. See below example of howto:

Default Form Field Without Code

Reconfigured Form Field Code

I n other words, insert the below section of code directly into the textarea form box
onFocus="doClear(this)"

The last thing we shall cover is the "Reset" button. Again this is not part of the script but by adding it into the script, it elevates the level of professionalism you and your site are projecting. See the below example of where and howto:

Default Configuration With "No Reset" Button

<legend> Number Pronunciator </legend>
<div style="padding: 10px;">
<input name="num" type="text" value="Enter Your Number Here" style="font-family:Tahoma;font-size:8pt;width:500px;" maxlength="315"onFocus="doClear(this)">
<input type="submit" value="Say" style="width:80px;font-family:Tahoma;font-size:8pt;">

Reconfigured Configuration With "Reset" Button

I n reality, all we actually did was to add the below line of code which denotes a reset button into the script to make it revert to the "Add Your Number Here" text inside the form.

<input type="reset" value="Reset"style="width:80px;font-family:Tahoma;font-size:8pt;">

G o ahead and type in some numbers in the above example and see how it works. We have deactivated the "Say" button for this tutorial for obvious reasons. Reason being since this little example is not connected to the rest of the script, if it would activate by clicking, it would take you off this page. So we deactivated the button.

* [ Return Whence You Came ]

Early on in this tutorial we said something about an "I" Frame and how to use it as a work around to stop the material below the effect to stop moving. Well......Basically all you need to do is build a new page (HTML document) with nothing on it but the code for this effect. Then on the page you want the effect to appear, just insert a defined Iframe and call the page that you just built with the effect on it. If it sound complicated, it really isn't. See the below and it should clear things up.

Below Is The Code For An IFrame

* This is the URL of the new page you have just built with nothing on it but the code for the Number Pronunciator.

height="100" This is how high (from top to bottom) the Iframe will be. Adjust this to how large or small you have configured the effect to be.
width="410" This is how wide (from side to side) the Iframe will be. Here again, adjust this to how large or small you have configured the effect to be.
align="left" This positions the Iframe on the page. It can be either left, right or center, depending on where you want it to be located.

B elow we have the effect sitting in an Iframe. What you are seeing is how the effect will look from the default code without any reconfigurations.