The template is where all the action takes place. The two navigation forms, the drop-down select menu and the next and last buttons, submit a number that is appended to the URL. That number is matched up with several different arrays whose matching elements hold related information. As the template loads into the browser, the information from the array elements is used to fill in pre-defined gaps.
The parallel arrays
are very important part of functionality as they are not only used to populate the template with different content, they are used to determine whether or not certain components are printed, and if so, how. Among other things, this means that each element of each array must hold related information.
One array holds script explanations. Another holds the names of external .js files containing each separate script, and another holds the titles used as options content and the literal HTML title.
NOTES: I discovered that while it is virtually impossible for one script to write another script to a page, it is possible to write opening and closing script tags referencing a source file containing the script. While NN 4.x won't render the tag as if written manually, the source file is still loaded into memory and hence can be executed.
Constructor Function Objects and Methods
In order to build the HTML elements needed for each script (form
and image elements), I created several custom objects and methods. This allows for a cleaner template, as I can now write elements to the page by simply referencing the objects and methods rather than re-writing the HTML as strings over and over. The two main objects are the Form object and the Image object. Although I like the table object because it allows to re-format the template, all I'm using it for now is the basic layout, so really I could have just used a static table. Hopefully soon I will be more creative with it.
Global nav select menu: the select menu is written to the template with as many options as there are elements in the title array. So once the structure of the select object is defined, it never has to be updated. It will conform automatically to the array it is associated with. Also, the current information that is being displayed in the template will be reflected in the select menu as the selected option. So the menu serves as a bread-crumb as well.
Page-to-page nav buttons: the PTP last and next buttons are simply submit buttons that reload the template and append the URL with the value of the current number plus or minus one, depending on which button is clicked. It may seem a little messy to use two submit buttons, but I figured why not-only one can be clicked per load anyway. If the current info on the page comes from the first array element, a last button is not printed. If the current info comes from the last array element, the next button is not printed. So there is never any danger of printing a button that will return an error. This means that once they are set up, they conform automatically to the number of elements in the array that drives them.
Bookmark-ability: even though one template is used for all the pages, their URLs are slightly different. Since both navigation forms use the "get" method to post form info the end of the URL, and the template is formatted based on that info, hitting a bookmarked URL will cause the template to be re-built using that information. Sadly, IE doesn't allow certain characters in a bookmarked URL, (usually only a problem when viewing locally) so I've added this to the to-do list.
Finding a way to have the source code for each script to be printed to a textarea without manually entering it into another (very long) array.
to printing the script to a textarea AND executing the script, both from the same source file.
First I converted each line of the function to a string, and stored it in a string variable. Then, I eval-ed
Printing Carriage Returns to the Textarea
Then to be able to print the code to the textarea without every statement running into the next, I used the replace method on the string of code. Using a loop, every line was searched for the occurrence of a semi colon and replaced with the URI-code for carriage return, "%0D%0A". Now it was ready to be parsed. Using the unescape method, each "%0D%0A" was rendered as a carriage return, making the code readable in the textarea. Carriage returns can also be printed to textareas using "\r\n" in place of the URI code, "%OD%OA", but if the returns need to be preserved and send to a server side database, the URI code will be more easily accepted. View the loadCode() function
described here. See Escape and Unescape String Methods / Handling Carriage Returns in Textareas
and Detecting Enter Key Press
lessons for more information on handling carriage returns in textareas.
Finding a way to view RENDERED source without using Netscape. (impossible - just use NN to see the rendered HTML code used for each example)
To Do List:
Create images object
Make form and table objects more efficient.
Solution to URL and IE local bookmarking.