C H A P T E R 20
Alerts
This chapter discusses design patterns that create an alert. An alert points out important information to
the reader by separating it from the content. There are two basic types of alerts: dynamic and static. The
first three design patterns in this chapter are dynamic alerts, which dynamically display information as a
user interacts with the document. The remaining alerts in this chapter are static alerts, which are always
displayed in a document. The Alert design pattern is an HTML pattern, which is basically a heading
followed by the alert’s message. The design patterns following Alert combine it with other design
patterns, demonstrating how you can combine existing design patterns to create new design patterns.
Chapter Outline
- JavaScript Alert shows how to dynamically pop up an alert based on an event.
- Tooltip Alert shows how to create a tooltip to show the user extra information.
- Pop-Up Alert shows how to pop up an alert to show the user extra information.
- Alert shows the basic HTML structure of an alert.
- Inline Alert shows how to make an alert using an inline element.
- Hanging Alert shows how to move the alert’s heading to the left side and the
content to the right side by using a hanging indent that does not require extra
markup. - Graphical Alert shows how to move the alert’s heading to the left side and the
content to the right side and replace the heading with an image. - Run-In Alert shows how to run the alert’s heading into the first line of the
content. - Floating Alert shows how to float an alert to the left or the right of the content
with its heading on the left and its content on the right. - Left Marginal Alert shows how to move an alert into the left margin using
absolute positioning. - Right Marginal Alert shows how to move an alert into the right margin using
absolute positioning. - Form Validation shows how to natively validate HTML5 forms and alert the user
for wrong input.