Today is . Page created 03/29/06, updated 07/06/06

Byte             Byte Converter             Converter
Byte Kilobyte Megabyte Gigabyte

U se this script to convert bytes, kilobytes, megabytes, and gigabytes. Quick and easy to use.

W e have tested the code in IE6.0, Firefox1.5.0.1, Opera8.52, Netscape7.02, Netscape8.1 and AOL Explorer1.2. This script worked in IE, Opera8.52, Firefox1.5.0.1 and AOL Explorer1.2. It will "Not Work" in Netscape7.02 and Netscape8.1. It does degrades well and you will not get any error messages.

D epending on your knowledge of HTML and javascripts, this is an easy three part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. It also makes use of an external .js script you need to save and upload into your directory.

Step One Is to paste the CSS Style code into the CSS section of your document. If your document does not have a CSS section, no problem. Just paste that section of code into the <HEAD> section of your document and add the opening <style type="text/css"> and closing </style> tags around the code. If this sounds confusing, see the below examples:

Default

#example {
border: 2px solid* #FFCF31;
color: #fff;
background-color: #00009C;
}

#example td {
border: none;
}

Reconfigured

<style type="text/css">
#example {
border: 2px solid* #FFCF31;
color: #fff;
background-color: #00009C;
}

#example td {
border: none;
}
</style>

N otice where we added the opening <style type="text/css"> and closing </style> tags. Also, the color coded above areas can be reconfigured to fit your site. All they will do is change the border color, width of the border and background color.

*     If you change the word solid to dotted the border will have a completely different look.

Step Two Is to copy and paste a portion of the code into a notepad, save it as byte.js in a convenient place (we use our desktop) and then upload it into your directory. Once you save as the icon should look like the below:
byte.js

I f you are a little unsure of howto make the .js file, grab the below link and it is completely explained.
.js File-Howto ]

Step Three Once you have made and uploaded your byte.js file into your directory, you need to paste a snipplet of code in the <HEAD> section to call the external byte.js file.

<!-- Paste this code into the HEAD section of your HTML document.
      You may need to change the path of the file. -->

<script type="text/javascript" src="byte.js"></script>

Step Four The last step is to paste another piece of code anywhere in the <BODY> section you want this effect to appear.

For Your Information For your Information:     The "Reset" button (located directly below the effect) is not part of the script. We added it as a little convenience to reset the forms to zero ( 0 ) to make it a little easier for you to enter another number. See below on where and howto add this into the script.

Default Without Reset Button*
*     This is the bottom or last part of the <BODY> section of code.

<td align="center"><input type="button" name="B24" value="   <   "
        onClick="convertgb(this.form)"></td>
</tr>
</table>
</form>
</div>
<p><div align="center">

Reconfigured With Reset Button

<td align="center"><input type="button" name="B24" value="   <   "
        onClick="convertgb(this.form)"></td>
</tr>
</table>
<input type="reset" value="Reset">
</form>
</div>
<p><div align="center">

I n other words, just paste the below as seen in the above code to add the "Reset" button into the script.
<input type="reset" value="Reset">

T he last little "Add-On" we inserted into the code is what is called "Automatic Form Field Clearing". Did you notice when you clicked inside any of the form fields with a zero ( 0 ) inside , the zero ( 0 ) vanished and you could type your number into the form. This is a very simple two part copy and paste code that goes in both the <HEAD> section and also directly into <BODY> section of the effect itself.

<!---- Start HEAD Section Of Automatic Form Field Clearing ---->

<script language="Javascript">
<!--
function doClear(theText) {
if (theText.value == theText.defaultValue) {
theText.value = ""
}
}
//-->
</script>

<!---- End HEAD Section Of Automatic Form Field Clearing ---->

T he last part that goes directly into the <BODY> section of the effect is pasted into the form fields (4) themselves. See below:

Default Without Automatic Form Field Code

<td align="center">
<input type="text" size="10" name="byte" value="0"></td>
<td align="center"><input type="text" size="10" name="kb" value="0"></td>
<td align="center"><input type="text" size="10" name="mb" value="0"></td>
<td align="center"><input type="text" size="10" name="gb" value="0"></td>
</tr>
<tr>

Reconfigured With Automatic Form Field Element Included

<td align="center">
<input type="text" size="10" name="byte" value="0" onFocus="doClear(this)"></td>
<td align="center"><input type="text" size="10" name="kb" value="0" onFocus="doClear(this)"></td>
<td align="center"><input type="text" size="10" name="mb" value="0" onFocus="doClear(this)"></td>
<td align="center"><input type="text" size="10" name="gb" value="0" onFocus="doClear(this)"></td>
</tr>
<tr>

I n other words, just paste the below little snipplet of code as shown in the above section:
onFocus="doClear(this)". Below is a working example of what we are explaining.

W e 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 ]