Alternative to Using Tables for Layout

Most developers are familiar with tables and how they behave. They have relied on them heavily in the past to display data as well as templating and design. But as we learned in my previous post you are no longer encouraged to use them for layouts. You should use CSS instead.

When I first started dabbling with DIV tables I used the CSS float property to mimic cells. But in many situations that method forced me to be overly specific on the heights and widths of my cells. It seemed to be two-times the work. Also vertical alignment and centering was much more difficult.

But luckily CSS3 has a solution for us with the DISPLAY property: table, table-row and table-cell.

In the following example I have some HTML:
And when you include a little CSS:
Above, I am showing how to easily center a table with auto-sized columns and rows based on the content. I’m also vertically and horizontally aligning a cell with ease. Heights and widths were not required. The height that was set was only to demonstrate vertical-alignment.

The CSS display properties work in all major browsers. They became fully functional as of IE9 but can work in IE8 with an additional meta tag. See this post for more information. IE8 was released on March 19, 2009 and IE9 on March 14, 2011.

Remember that it is just as bad to use tables for layout as it is place tabular data into a DIV table. Tables still have a purpose! If you are confused on when to use each then you may find a better understanding in my previous post.

See a DEMO.

Enjoy.

Read More

When and How to Use Tables

If you are web developer then you have probably heard at some point NOT to use tables for layout. This has to do with best practices for website accessibility. But what really are the rules? The WC3 defines the table model as follows:

The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.
On the same page it also mentions that you should not use tables for layout:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.

With that being said, it is perfectly fine to use tables for textual data that can be organized into columns and rows. It is also fine if hyperlinks or image-links are included with the data (i.e., email links). Tables can also be used for input as well. Feel free to use textboxes, dropdowns and other form elements if they all tie to a single record of information.

So what about headers? Are they required? They are required if you are adhering to Section 508 standards for web accessibility:

(g) Row and column headers shall be identified for data tables
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

The presence of table headers help eliminate confusion for both visual and non-visual user agents. The "markup" mentioned above can be performed as follows:

Table Header or <th> cells have a scope attribute. It tells the screen reader whether the header is for a column (col) or for a row (row).

Table Data or td cells have a headers attribute. It contains the id(s) of any <th> cells that apply to it, delimited by spaces.

Scope and headers fulfill the same function so you can choose one or the other. While screen readers may correctly guess whether a header is for a column or row based on table layout, clarifying with one of the above methods makes this unambiguous. However, Section 508 demands the markup if multiple headers are involved.

Abbreviations can also assist in markup:
They can be used for clarification, space-saving (for minimalistic user agents), and repetitive rendering (i.e., speech synthesizers may restate the <th> abbreviated value before reading each associated <td> value).

Hopefully this helps clarify some questions and aids in future development.

Read More

jQuery TE Validation

In one of my latest projects I utilized the jQuery Validation Plugin to handle the error validation of a page. It is a popular plugin that examines all elements in a form and validates them based on rules and/or classes. For instance, you can set a class on an textbox to be "email" and it will notify the user (as they leave the element) if the data they entered has correct email syntax.

One of the fields in my page was a rich text editor (WYSIWYG) using the jQuery TE Plugin. Unfortunately, validation would not work with it because of the way it manipulates the textarea. The plugin forces users to interact with an Input DIV (a DIV that uses the contenteditable attribute), while the textarea is hidden and populated behind the scenes.

Sample HTML:
I begin by transforming the textarea into a WYSIWYG by calling the "jqte" method. I then override the default behavior of the validator plugin by including invisible elements in validation. Normally it would ignore the textarea since it can't be seen.
I then initialized my validation object so it will monitor the form. The plugin enumerates through the targeted form’s elements and detects the "required" class on my textarea. Below we also specify a custom error class (maskError) to be used for our error label. We then manage the placement of the error label. By default the validation plugin will stick the message after an element. With jQuery TE, the textarea is placed in a hidden DIV, so the error label cannot be seen if it is placed there. Since a Parent DIV surrounds the whole widget, it is better positioned after it. Next, we override the highlight and unhighlight functions so that the errorClass will also be added/removed from the widget's Parent DIV.
Next, our CSS will come into play. If our errorClass is set it will put a red border and striped background on the widget. This simply accommodates the error message.
Next, we intercept the "blur" event of the Input DIV. Here I am checking to see if the form has been submitted or not. If so then I revalidate the form each time a user leaves the WYSIWYG, which in turn, sets or removes the visual error indicators.
Lastly, we wire-up the click event of the button to submit the form. We are displaying an alert to show everything is valid. You can actually bypass that and just submit the form and it will invoke the Validator plugin.
This seemed to do the trick for me and made the WYSIWYG behave like the other form elements on the page.

See a DEMO.

Enjoy.

Read More

jQuery Masked Input Plugin

Today I want to discuss a jquery plugin that I have found to be useful.  It is the Masked Input Plugin.  It does three things: gives a visual representation to the client of the format of data we require, ensures they enter it that way, and does immediate validation.

Here is an example of a mask a user could see for phone input:
(___) ___-____

The mask is shown when the textbox receives focus. Underscores indictate where the user should type. Your mask restricts what you can type, and you cannot type anything beyond the mask.

Masks Rules:

When building your mask there are reserved characters with preset meanings:
  • a – Represents an alpha character (A-Z,a-z)
  • 9 – Represents a numeric character (0-9)
  • * – Represents an alphanumeric character (A-Z,a-z,0-9)
  • ? – Anything after a question mark is optional.
To create the phone mask portrayed above you would do this in script:
You can also create your own definitions.  In the examples below I have created some custom definitions to ensure specific characters are inputted in the correct positions (i.e., times must be prefixed with a 0 or 1.  No other numbers will work).  There is also a “completed” event which fires when all characters have been entered.  If your mask contains optional characters that are ignored then that function will not fire. In that case you may need to use the textbox’s blur event, or better yet, both events.

I have used these masks in past projects:

Standard Time Textbox:

This mask ensures users enter a Standard Time into the textbox (i.e., 03:30PM). For the period (AM/PM) it is case insensitive and will also accept the first character (A or P) or neither (in which case it will assume AM).  It will upcase the period.

Zip Code Textbox:

This mask ensures users enter a 5-digit Zip Code or Zip+4.  If anything is partially entered the textbox will clear.
Remember when these values are retrieved server-side they will be in the format shown in the textbox.

See a DEMO.

Enjoy.

Read More