Articles by admin

You are currently browsing admin’s articles.

Expanding Form

March 12, 2006 in Accessibility, JavaScript by admin | 5 comments

In one of our projects, we wanted to give our admin users the option to sign up as many people as they want at one time, but without presenting them with a very long form full of duplicated fields that they probably won’t need. We used a bit of JavaScript to duplicate the relevant fields as the user needed them, so they could get as many or as few as required.. The basic idea is:

  1. Grab the relevant fields and clone them using cloneNode.
  2. Iterate through the cloned fields and add a number to the end of the values for the input’s id and label’s for value. We need to keep our ids unique!
  3. Append the new fields to the end of the containing div.

What if JavaScript is turned off?

We’ll need to make sure that users with JavaScript turned off can add extra fields, too. Adding a name/value pair to the submit button will submit the page to the server with a indication that the user has JavaScript turned off:
value="Add new user" name="add-user-no-js"

The doctype is XHTML strict and the mark-up meets Level AAA accessibility standards. The JavaScript is unobtrusive DOM scripting.

See the form.

Note: This article has been changed to include a simplified example. The original example included show/hide functionality which added unnecessary complexity.

Real Dotted-line <hr>s

March 11, 2006 in CSS, XHTML by admin | 14 comments

Styling horizontal rules with CSS is fairly intuitive in IE: to change the color, use the color attribute; to change the width and heights, use the width and height attributes.

Styling horizontal rules in other browsers, however, is slightly less intuitive. To change the color of the horizontal rule, you need to change the background-color attribute. However, this still leaves an unsightly shadow effect that the now-deprecated noshade attribute once took care of. This has led many web authors to stop using the <hr /> tag altogether in XHTML, and fake it with borders on empty divs. But there is a simple solution to this problem – turn off the borders on the <hr>!

hr {border-style: none;}

Dotted-line <hr>s

To go one further and have a dotted-line <hr />, set both the color and background-color to match the color of the element it is contained within. Then add a bottom border with the desired pattern (solid, dotted, dashed, etc) to the <hr />, and viola! A dotted horizontal rule:

hr {color: #fff; background-color: #fff; border: 1px dotted #ff0000; border-style: none none dotted; }