Keeping with the theme of my recent JavaScript posts, here are a couple of simple JavaScript functions that are extremely useful for creating a clean user interface. The scripts themselves are simple, but together they allow you to create the effect of a div that expands and collapses to show or hide its contents.

(more…)

Writing about JavaScript the other day got me thinking about some of the other JavaScript code that has helped me solve design problems in the past. Below is a script that limits the number of characters in a text area to a maximum value and also displays the number of characters that can still be added to the text area. This is useful when text area data will be stored in a database VARCHAR field which has a 255 character maximum. It allows the user to craft their response to match the allowable length before the form is submitted.

The textCounter script runs once after each key stroke is complete (”key up”) and takes two arguments. The first is the field being monitored, the second is the target field that will be updated with the “characters remaining” value.

Note that we don’t add 1 and subtract 1 for each keystroke. Instead we use the current field length because it is possible to paste text into the field or to select and remove more than one character with a single delete keystroke.

I don’t write a lot of JavaScript. Every now and then I need it to use it solve a design problem. Recently, I needed JavaScript that would make sure that only three checkboxes could be checked at once. Here’s what I came up with in case it’s helpful to someone else.

Each time a box is clicked the script runs. If a check mark is being added then the script tests to see if the running total (current_count) is larger than the defined maximum (max_count). If so, then it undoes the checkmark and displays an alert, but if not, then it allows the check and adds one to the current tally. When a box is unchecked, the tally simply decreases by one.