Enhancing Interactive Experiences: Code Examples

JavaScript for an interactive web experience

Dynamic side navigation— Topics spring open when the user selects one. Select a second topic and the first topic closes itself.
Prettier Photo Galleries— Click any thumbnail to display interactive gallery.
Interactive Calendar— Display events by region or event type
Product Matrix— Interactive product matrix speeds comprehension of a complex data. Click Show Product Finder to reveal the product matrix.
AHAH— this example shows the use of AHAH as well as attaching behaviors to objects, allowing JavaScript calls to be removed from the HTML
Sortable columns within a form— click a column header to sort in ascending then descending order. Also, row under mouse highlights to facilitate reading across the row.
Click "Did You Know?" Dog to overlay extra content.
Clamshell Examples
1. Product page tabs— JavaScript workaround for IE's incomplete support for :hover pseudo element allows the border of backgrounded tabs to change on a hover
2. Clamshells optionally invoked by URL string

Enterasys.com Main/side navigation— This DHTML navigation uses simple unordered lists to store the navigational structure; this way a 3 tiered hierarchical nav can easily be edited by a hand coder.
Using DIVs instead of TABLEs to format pages.
Product Matrix Click Show Product Finder to reveal the product matrix.
Classroom Schedule: Full Schedule, by course, by technology. These 3 examples reuse the same snippet of HTML. CSS drives what to display on the page.
You are Here: nav highlighting
Mining URL string to determine content to display (OMansion.com reuses the same navigational sidebar across entire site, but "Secured by Thawte" logo hidden on home page)
Improve accessbility for the visually impaired: Use ems as unit of size to create "elastic" site this page's text appropriately resizes in all browsers to match the user's font size settings.
Printed pages need not resemble their screen versions: Print this product page. The header prints a breadcrumb trail, the rest of the navigation disappears, and hidden clamshell tabs all print.

Interactive Calendar— Data is stored in Filemaker Pro, AppleScript generates and uploads the HTML calendar
AppleScript Studio: (sample not available) Drag file onto Droplet. Droplet will check filename against database. If name is found in database, script will process file. If name is not found in database, a minimal interface will appear. Drag a URL onto the interface and click the Go button and the file will be uploaded to that destination (ftp server data is stored w/in the project).

Here is a sneak peak at a Hotel Management Solution I am currently working on. It has over 40 views, web integration, and the user interface is incredibly user friendly.