I'm writing a CSS book

JavaScript archives Compatibility CSS coaching Thidrekssaga QuirksBlog Donations Politics Mobile About COH

sitemapcontact

Portfolio: Sandwiches and funerals

Added two portfolio items: onzeCatering.nl and the DELA Uitvaartkompas (literally "Funerary Compass", but the name doesn't survive translation). Both are heavily form-oriented sites, and the first one uses a new idea for searching through large amounts of items which I hope to expand in future projects.

When the butcher I've been buying my meat from for ages told me he needed an ordering website for his catering business, I was intrigued. For budgetary reasons a real database-driven site was out of the question, but on the other hand he wanted to offer about 150 kinds of sandwiches, making some sort of usability enhancement beyond a plain form-in-a-table mandatory.

I decided on a W3C DOM search script to help people find their way in the large sandwich table form. Obviously it wouldn't work without JavaScript, but I didn't worry too much because

1. his clients are overwhelmingly Explorer Windows users
2. the form remains accessible, it just becomes badly usable (and this reasoning touches on fundamental questions that will have to be addressed in the near future)

You can try the resulting script on the sandwiches page. Search for them at the top of the page; the form is in Dutch, but try "ham" (ham), "kaas" (cheese) or "filet" (fillet) to get an idea of how it works. Please don't submit the form, though, unless you live in Amsterdam and really want to order some sandwiches.

Basically the script is quite simple:

1. onLoad, store the title of each table row (ie. the sandwich name) in a special property of the TR. This is to speed up the script: it doesn't have to read out values of 150 hard-to-find text nodes each time the user presses a key.
2. onKeyUp in the search field, go through all these properties. If they partially match values, move the relevant TR straight to the top of the page.
3. Ordering a sandwich gives the user some extra form fields: he has to decide what sort of bread he wants, and whether he wants butter. Allowing users to order the same sandwich with different kinds of bread was tricky, both technically and interaction-wise, but I was able to solve it well enough for the time being.

My client's clients have overwhelmingly indicated that they understand and like the search, so this site makes everybody happy.

The story behind DELA Uitvaartkompas is totally different, and I'll tell it in a separate later entry.

Comments

Comments are closed.