- InlineEditor.js has a function
edit_inline()that can be assigned to a button or it can be used as an
onclickhandler attached to a document element. It creates a little edit form that can be used to change the document element inline without refreshing the page.
- AcmeMenu dynamically turns a list of <A> tags into a drop-down, push-up, pop-anyway type of menus.
- This color picker studies the interaction between text colors and background colors.
Most of the following projects do not have documentation but the source code is heavily commented.
- Simple Image Utilities
- A page scroller that works like a horizontal scroll bar. this site built for a real-estate company.
- A number scroller that can also be used to navigate multiple pages of a search. As a variation of the PScroller above, this search This example is a variation of the above MLS search. The "Next" and "Previous" buttons, when held down, scroll the page numbers until let up, at which time the proper page can be displayed.
- This script defines a function
make_table_columns_resizable()that makes the columns of any HTML table resizable much like the columns of a spreadsheet. This report demonstrates a table with resizable columns.
- TearOffMenu puts together
resize_meobject to produce menus that can be "torn" off the menu tree and positioned anywhere on the screen. Not only that, but once positioned the menus can be resized by clicking and dragging their lower right corner. Look under this icon on this report to find menus that can be torn off.
- moveMe makes any <DIV> tag into a panel that the user can drag around the screen.
calendar.jsscripts can be used to create small calendars which can be useful for filling in dates like on this example form. When coupled with a server side program and calendar_report.js these routines can be used to make a full fledged calendar application. The calendar's content is filled in after the calendar is rendered making it easy to interface to database queries.
- Move items from one <SELECT> list to another. Multiple items can be moved at once, double clicking an item moves it, and selected items can be re-ordered before submitting. Here is an example.
- The selectScroll.js script defines a function
make_select_scroll(select_field_id)that puts buttons at the top and bottom of a <SELECT> list which scrolls the list up or down. It works best with Firefox and it degrades nicely for other browsers. Here is an example illustrating a scrolling list of years in a drop down list.
dom_infoutility library is referenced by the above scripts to obtain information of the document objects such as an element's width, height, and its style settings. It can read settings in CSS files.
browser_versionlibrary discovers which browser is being used and sets its flags accordingly. A twist on this browser sniffer is that the main function prints out which flags are set — useful for debugging code.