Today is . Page created 08/30/09

Array Array Creator - Generator Generator

Array Name:
Indexed Array Length:
Index Value: Ext
Index Style: 1 2 3
Add Numerical Values: Yes No

Vertical Line Divider

Coding large arrays can be a bit of a repetitive chore. This script will create a generator that will help speed up the process. Easy to use and implement!.

We have tested the code in IE 8.0, Firefox 3.5.2, Opera 9.64, Netscape 9.0.0.6, Flock2.51 and Safari Public Beta 4(528.16). This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy four (4) 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 file you need to save and upload into your directory and a CSS section.

If your document has a CSS section, (which is located in the <HEAD> section) then all you need to do is add that part of the code into CSS section. If your document does not have a CSS section all you need to add the is the opening and closing style tags into this section of code. If this is a little confusing, See below on where and howto:

<style type="text/css">

Paste CSS Section Of Code Here!

</style>

<!------- <OPENING> CSS STYLE TAG

 

<!------- </CLOSING> CSS STYLE TAG

You can make a few "cosmetic" reconfigurations in the CSS section to fit your document. See below where and howto.

#display {
position: relative;
left: 10px;
width: 450px;
border: 1px solid black;
padding: 10px;
}
  • left: 10px; ------ This denotes how far from the left side of the page or table the bottom box is where you see all the computations. We have ours set at 1 px.
  • width: 450px; ------ This denotes how wide the bottom box is. We have ours at 380.
  • border: 1px solid black; ------ This denotes the width and color of the border around the bottom textarea is. We have ours set at 1 px and the color is #fff0f5.
  • * ------ FYI -- The font color inside the generator itself corresponds to the color you have designated in your <BODY> tag.

For Your Information     If you would prefer to have the CSS section called from an external file, this is not a problem. Just copy and paste the CSS section (No opening or closing tags) into a notepad, save as arrayCreator.css, upload it into your directory and now add a snipplet of code into the <HEAD> section of your document to call this file. In all actuality, it is the very same way you would do an external.js file except the file extension is .css and the code to call this file is slightly different. See below:

Saved .css File

external.css file
The above is how the file will appear once you have saved as. Click on it to see how the file appears in a notepad. You will notice the lack of opening and closing Css tags.

Snipplet of Code for external .css file

<link rel="stylesheet" type="text/css" href="loanCalculator.css">

You may have to change the above "relative"* path depending where you have uploaded your external .css file. We have ours in a css directory so.... ours would look like the below

<link rel="stylesheet" type="text/css" href="css/loanCalculator.css">

* If you do not understand or need a little refresher on the difference between a Relative and Absolute" path, grab the below link and you are there.
[ Relative vs. Absolute ]

If you would like to see this effect with the use of an external .css file, grab the below link and you are there.
[ With External .CSS File ]

Warning Logo     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 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 ]

Whichever above method (external.js or Traditional Cut/Copy and Paste) of adding a section of code into the <HEAD> section you select to use, there are "No" reconfigurations to be made in this section.

If you opt for the external.js file, then you need to add a sniplet of code into the <HEAD> section to call the external.js file. (See Below)

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

Once all the above steps are done, the only thing left is to paste the <BODY> section of code where you want the effect to appear.

On A Final Note     If you were to place a complete font tag above the <BODY> section of code, it would change the font, color etc. within the lower textarea. Be sure to close the </font> tag at the end of the <BODY> section of code See below:



<!-------- START <BODY> SECTION OF CODE HERE -------->


<font face="arial,georgia,helvetica"size="1"color="#FFB6C1">
<form name="f1">

<table border="1">
<tr>
<td>Array Name:</td>

<!-------- THE REST OF THE <BODY> SECTION OF CODE GOES HERE ------>

</form>

<div id="display"></div>
</font>


<!-------- END <BODY> SECTION OF CODE HERE -------->

* Add-On Not Included In Script Little Extra Not Included In The Script:     If for whatever reason you would like the lower textarea to be located other than below the generator, it is no problem. You just need to remove one line of code and place it where you want it to appear. grab the below link and it is fully explained.
[ Locate Computation Table Elsewhere ]

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 ]   Bookmark and Share