Today is . Page created 02/21/07

Numbers     Number Sorter Sorter

Number Sorter
Data Field Result

This number sorter script sorts numbers numerically. Just type in the numbers to be sorted, separated by either a comma or a space, in the Data Field textarea on the left and click the Sort Numbers button. The numbers will appear in the Result textarea on the right sorted numerically from lowest to highest.

We have tested the code in IE7.0, Firefox2.0.0.1, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in all platforms with one variation (which do not hamper the operation of the script) in Netscape8.1.2, Firefox2.0.0.1 and Opera9.10.

For Your Information 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. If you select to incorporate it into a functional form, you need to have a solid background in HTML, javascripts, forms and reconfigurations. If you do not need to incorporate this effect into a functional form, you can use it as a stand alone script as is without any incorporation. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" to incorporate this into a working form 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> (no reconfigurations) and <BODY> (minimal reconfigurations - cosmetic only) sections (either incorporated into a working form or anywhere you want it to appear as a stand alone script) in your document.

Since the effect itself is transparent other that the top section, you can reconfigure the color, font, font size and border (or lack of) to match your site. See below where and howto.

<table border="1" align="center" cellspacing="3" cellpadding="2">
  <tr>
  <td align="center" bgcolor="#dda0dd" colspan="2">
    <font face="arial,verdana,helvetica,sans-serif" size="2" color="#ba55dc">
    <b>Words Sorter</b>
    </font>
    </font>
  </td>
  </tr>
  <tr>
  <td align="center">
    <font face="arial,verdana,helvetica,sans-serif" color="#dda0dd" size="2">
    Data Field
    </font>
  </td>
  <td align="center">
    <font face="arial,verdana,helvetica,sans-serif" color="#dda0dd" size="2">
    Result
    </font>

The only other things you can reconfigure are that of the textarea forms themselves. See below where and howto.

  <td align="center" valign="top">
    <textarea rows="8" name="sorter" cols="30" wrap="virtual" onChange="startOver()"></textarea>
  </td>
  <td align="center">
    <textarea rows="12" name="sorted" cols="15" wrap="virtual"></textarea><br />
  </td>
  </tr>
  <tr>

Define Cols and Rows

  •       cols="15"       This denotes how wide from side to side the textarea will be
  •       rows="8"       This denotes how high from top to bottom the textarea will be

In our above example we have our textareas configured as shown below.

  <td align="center" valign="top">
    <textarea rows="12" name="sorter" cols="40" wrap="virtual" onChange="startOver()"></textarea>
  </td>
  <td align="center">
    <textarea rows="12" name="sorted" cols="20" wrap="virtual"></textarea><br />
  </td>
  </tr>
  <tr>

Just play around with the cosmetic reconfigurations until it fits your site.

Add-On Not Included In Script Little Extra Not Included In The Script:     If you noticed on the above example the button for "Instructions", well, it is not part of the original script. We added it for your convenience. If you would like to see where and howto add this into the effect, see below.

Default <BODY> Section - No Instructions

<td align="center" colspan="2">
<input type="button" value="Sort Numbers" onClick="getData()" />
<input type="reset" value="Reset" />

</td>
</tr>
</table>
</form>

Reconfigured <BODY> Section - With Instructions

<td align="center" colspan="2">
<input type="button" value="Sort Numbers" onClick="getData()" />
<input type="reset" value="Reset" />
<input type="button" onClick="alert('Type in the numbers to be sorted, separated by either a comma or a space, in the Data Field textarea on the left and click the Sort Numbers button. The numbers will appear in the Result textarea on the right sorted numerically.')" Value="Instructions">
</td>
</tr>
</table>
</form>

Warning Logo     Note Of Importance     If you notice in the above where we placed the "additional code" for the "Instructions", be sure to place that code (if you so choose to use it), before the closing </form> tag.

Copy and Paste Code Copy and Paste Code:     Below is the copy and Paste code for the "Instructions" form button.

<form>
<input type="button" onClick="alert('Type in the numbers to be sorted, separated by either a comma or a space, in the Data Field textarea on the left and click the Sort Numbers button. The numbers will appear in the Result textarea on the right sorted numerically.')"Value="Instructions">
</form>

For Your Information For your Information:     We also have the same identical script that sorts words alphabetically. To see that script, grab the below link and you are there.
[ Word Sorter ]

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 ]