JavaScript add-ons

Indicate that a page has been archived.

Correct use

Refer to: Archiving content wiki

Add the auto-complete feature to a text input field.

Correct use

Refer to: Auto complete for text input fields wiki

Correct use

Refer to: Date picker wiki

Correct use

Refer to: Events calendar wiki

Correct use

Refer to: Charts and graphs wiki

Correct use

• Use to hide secondary or tertiary content, not primary content
• Do not use as a means to tidy up the look of your page. If the page is deemed too busy, consider other options like separating the content over several pages or chunking the information in a more aesthetically pleasing way.
• Refer to: Expand/collapse content wiki
• Refer to: Expand/collapse all content wiki

Correct use

Refer to: Feedback form wiki

Correct use

Refer to: Footnotes wiki

Correct use

Refer to: Form validation wiki

Correct use

Refer to: Light box wiki

Correct use

Refer to: Mathematical/scientific formula display wiki

Correct use

• The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.
• This is also known as a gauge.
• The meter element should not be used to indicate progress (as in a progress bar). For that role, HTML provides a separate progress element.
• The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.

Correct use

Refer to: Multimedia player wiki

The HTML5 localStorage object is used to store data persistently (no expiration date). This component adds support for this object in browsers that do not already have native support.

Correct use

Refer to: Persistent storage wiki

Correct use

Refer to: Progress bar wiki

Correct use

Refer to: Session timeout wiki

Correct use

Refer to: Share widget wiki

Correct use

Refer to: Slide out tab wiki

Correct use

Not documented at this time.

Correct use

Refer to: Prettify source code wiki

An archive module can be added.

Correct use

Jakob Nielsen, a top usability expert, wrote the article Tabs, Used Right (external link), which outlines the correct use of tabs. In this document, he states that tabs should:

• Not use all-capital letters for the labels;
• Use only only one row of tabs that are on top of the panel;
• Alternate only between views within the same type of context, and not navigate to different areas;
  • Tabs should logically chunk information so users can easily predict what they’ll find. They should not have to simultaneously refer to and compare content.
• Have a highlighted Currently selected tab — with unselected tabs that are clearly visible and readable;
  • The Current tab should connect to the content area.
• Use plain language and have short titles;
• Use a parallel naming structure.
  Correct use = parallel labels:
  • Tax forms
  • Charity forms
  • All forms
  Incorrect use = unrelated labels:
  • Forms
  • Offices
  • FAQs
• Have an obvious scope that the tabs control;
• Have a quick click response time (ideally <0.1 s).
• Refer to: Tabbed interface wiki

Correct use

Refer to: Text highlighting wiki

Correct use

Refer to: Web feeds wiki

Correct use

Refer to: Zebra striping wiki