Today is . Page created 10/27/07

Geometric Figure Area/Volume Calculator Calculator Generator

Enter Radius of Circle/Cylinder

Enter Height of Cylinder


(Make sure you entered the radius)
Enter Measurments for Rectangle Area:


 

The calculation and answer is below:

Need to find the area or circumference of a circle, the area of a rectangle, or the volume of a cylinder? This cool script will find it for you. In addition to the answer, it also gives all the steps needed to solve the equation. (The answer is rounded off).

We have tested the code in IE 7.0, Firefox 2.0.0.8, Opera 9.24, Opera 9.50 Alpha, Netscape 9.0RC1, Netscape 8.1.3, AOL Explorer 1.5 and Safari 3.0.2. This script worked well in all platforms with no variations observed.

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> (No reconfigurations) and <BODY> section of your document. Other than optional cosmetic (font face, color etc) reconfigurations, there are really not any changes that can be made.

Point Of Information Point Of Information     On the default code that you will be getting from the script site, everything is right on top of each other instead of the way we have it with the calculation form to the right. Reason we split it is quite simple. Instead of having to scroll down and up everytime we made a calculation, everything was right in front of us at all times. To split it is quite simple. Just place the <BODY> section of code inside side by side tables. See below where and howto;

<p><table border="0"cellpadding="4"
cellspacing="3">
<tr>

<td valign="top" align="left" width="35%">

Everything in the <BODY> section but what is color coded in the below table goes here

</td>
<td valign="top" align="left">

<b>The calculation and answer is below:</b><br>
<textarea name="codegenerator" rows="10" cols="30">
</textarea>
</form>
 </td></tr>
</table></p>

Default Appearance

Default View

The above code will make the calculator appear as you see below

Reconfigured Calculator

Add-On Not Included In Script Little Extra Not Included In The Script:     The last this we shall cover is to make the <HEAD> section of the script into an external.js file and called from an external location. If you need a little refresher on howto, see below.

The <HEAD> section of code starts and ends with opening and closing JavaScript tags, See below:

  1. Remove the opening and closing JavaScript tags.
  2. Copy/cut and paste everything in-between into a notepad and save it as areaVolumeCalculator.js*
  3. The newly created (Saved As) file will look something like this   areaVolumeCalculator.js
  4. Upload the newly created areaVolumeCalculator.js into your directory
  5. Paste the below snipplet of code into the <HEAD> section of your document to call areaVolumeCalculator.js

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

  6. If you have uploaded the areaVolumeCalculator.js into a different directory, you will have to change the path of the above to reflect the location.
  7. If changing the path is a little confusing, grab the below link and it is explained in detail.
    [ Upload To Different Directory ]
* We named our external.js file areaVolumeCalculator.js. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this.

If you would like to see an example of this effect with the use of an external.js file in the <HEAD> section, grab the below link and you are there.
[ Area Volume Calculator/Generator With External.JS File ]

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 ]   [ Scripts In Conflict ]   Digg It!