Example Scripts Index

Site Navigation 
Date Selection Pop-up Calendar (June 2004).
By popular demand (sort of), a cross-browser pop-up calendar (in-window) for the quick entering of dates into form fields using a mouse (or other pointing device).
Dynamic Drop Down Menu (October 2004).
Drop-down navigation menu scripts are rarely flexible enough to adapt to user preferences for window dimensions and font-size, or capable of clean-degradation to viable HTML alternatives. This script attempts to demonstrate that neither are consequences of the nature of drop-down navigation menus.
Dependent (or Cascading) Select List (January 2003).
Dependent Select List is one of those scripts in which the selection in one HTML select element changes the options in the next. It allows an indefinite sequence of such lists to be chained together and has been designed to leave a workable UI in the event that client-side scripting is unavailable (or the browser cannot support the script). On the whole I found the results unsatisfactory and would prefer to cope with JavaScript disabled browsers by splitting the dependent lists up across a sequence of pages in a wizard style interface, having server-side scripts write out the options of the next list based on the values from the previous page. However, this script is still better than most of the others of its type that I have seen.
Finalizer. (May 2003)
Finalizer is a general function designed to arrange that a function passed to it as an argument is executed during the onunload event in a browser. Its primary purpose is to address the memory leak problem on IE browsers but has been written to provide the facility cross-browser as it may have other applications.
In-Window Image pop-up. (December 2003)
A recurring theme in browser scripting is the desire to use a gallery of thumbnail images as the launching point of a series of new windows pre-sized to fit the larger versions of those images. Unfortunately it is not achievable cross-browser, not least because any operation that involves new windows is subject to the influence of pop-up blocking software, but also because determining the required size for the new window can, at best, only be done based on invalid assumptions about user configurable and OS dependent window features. This script demonstrates an alternative approach that avoids the need to open new windows and the reliance on invalid assumptions.
In-Window pop-ups. (May 2004)
What started life as a fairly simple script demonstrating dragging multiple in-window pop-ups and adding z-index control in the form of a simple window manager expanded into quite an elaborate window manager with re-sizable, scrolling, dragable windows with most of the possible window features added to a basic window object by augmentation, making the result fairly modular.
Falling Snow (May 2004).
Another of those irritating DHTML animations that people seem to like to add to web sites on a seasonal basis.
Star Field 1. Demo and Source (August 2003).
This script is a re-working of a "travelling through space" visual effect. It was written in response to a comp.lang.javascript question complaining that Gecko browsers would not run another example of this script quickly enough for the result to be a smooth animation. It has been my experience that Gecko browses are capable of executing most animation scripts successfully, but only if they are written for maximum efficiency.
I re-worked the original script, though nothing of that original remains in this version (so I won't credit its author) and achieved satisfactory results on Gecko browsers. This version cheats when producing the 3D illusion and the result produces a fish-eye lens like effect, which I actually prefer to the following version.
Star Field 2. Demo and Source (August 2003).
The fish-eye lens effect of the previous star field script did not meet with universal approval so I re-wrote it again. This version models the stars in a virtual 3D space and then applies a perspective transformation to project them onto the browser viewport. I originally thought that it would not be practical to do the perspective transformation quickly enough to achieve smooth animation but applying a number of short-cuts, such as only modelling one quarter of the 3D space and then randomly projecting the stars onto the rest of the viewport, produced an acceptable final result.
Both this script and the preceding star field script may be of interest in that they demonstrate a (almost) totally anonymous script. That means that they have no impact on the global namespace and cannot be interacted with by any other scripts on the same page. They are only almost anonymous because they use the setTimeout function and employ the fall back technique of providing custom toString functions for the function that are passed as references to setTimeout so that they can still work on browsers that cannot accept non-string parameters as the first argument to setTimeout (such as IE 4 and Opera 5). If the browser has to use the fallback it must create a global property so that the setTimeout function can resolve its string argument.
Table Highlighter. (July 2003).
Highlighting table rows and columns when the mouse is over them is relatively trivial but becomes more involved when some of the cells in the table use rowspan or colspan attributes. These scripts were designed to totally automate the process of determining the relationship between rows and columns and spanning cells. Resulting in a script that is extremely easy to configure and use. The original row and column highlighting version was easily adapted to a row only and column only highlighting version.
Table Body Scroller. (July 2004).
A script that scrolls the body of a table while keeping the header cells visible and linked up with their respective columns and rows.
Table Body Scroller, with cell content automatically offset. (September 2004).
A variation on the preceding script that attempts to keep as much of the contents of the scrolling table in the region visible to the user as possible.
Table Sorter. Demo and Source (June 2003).
Table Sorter is a W3C DOM table sorting script designed to be fast, degrade cleanly and silently on un-supporting browsers and facilitate fall-back to server-side table sorting if the task cannot be done on the client.
© Richard Cornford 2004