CHAPTER 20 ■ ALERTSPop-Up Alert
Problem To implement pop-ups, you need a way to attach events to HTML elements without coding
them into the markup.
Solution Using open source JavaScript libraries, you can dynamically attach events to elements. This
eliminates event code within markup.
There are several open source JavaScript libraries that you can use for this purpose. I chose
two free libraries from Yahoo! that are licensed under a BSD license: yahoo.js and
event.js. They are available at http://developer.yahoo.com/yui/.
I also use an open source JavaScript library called cssQuery.js from Dean Edwards located
at http://dean.edwards.name/. It is freely licensed under LGPL 2.1. It allows you to select
elements in JavaScript using CSS selectors.
I also provide an open source library called chdp.js freely licensed under a BSD license. It
provides functions that integrate these other libraries.
You can use these libraries by attaching each one to your document in the order shown in
the example.
You can attach your own JavaScript file to execute code specific to your document. The
example names this file page.js and shows its code. The browser executes the two
addEvent() functions first. The first addEvent() function attaches a generic function called
purgeAllEvents() to the page’s unload event. When the page unloads, purgeAllEvents()
purges all attached events from memory. The second addEvent() function attaches
initPage() to the page’s load event. After the page loads, initPage() assigns events to
elements using assignEvent().
It is easy to use assignEvent() to assign an event to elements. The name of the event goes
in the first argument (without the “on” prefix). A CSS selector in the second argument
determines which elements get assigned to the event. You can use any CSS 2.1 selector.
applyToDescendants() goes in the third argument. The CSS selector in the fourth argument
selects which descendants of the element that generated the event are affected by the
helper function in the fifth argument. In the example, I use showElement(), hideElement(),
and toggleVisibility() from chdp.js as helper functions to show, hide, and toggle the
display of pop-up elements.
Tips This is a flexible framework. You can use CSS selectors to apply any event to any element,
and you can supply your own functions to handle events.
You could use the Event Styling design pattern in Chapter 17 to change class names
instead of using showElement(), hideElement(), and toggleVisibility(). Unfortunately,
Opera 9 has trouble rendering absolute elements when you add and remove class names. To
avoid this problem, this design pattern directly modifies an element’s visibility using the
DOM.
You can build prettier alerts by using rounded corners with border-radius or shadow
effects, as described in Chapter 6.
You can combine this pattern with Transitions, Animations, and Transformations, as
described in Chapter 1, to deliver a more stunning visual effect.
Example The first assignEvents() function in the example assigns the onclick event to all pop-up-
trigger elements. When the onclick event fires, applyToDescendants() applies
toggleVisibility() to each pop-up descendant of the element that fired the event.
toggleVisibility() hides an element when it is visible and shows it when it is hidden.
Related to Alert, Inline Alert; Positioned, Closest Positioned Ancestor, Atomic, Absolute, Relative
(Chapter 7); Left Offset, Top Offset (Chapter 9); Image, Replaced Text (Chapter 14); Event
Styling, Rollup, Flyout Menu (Chapter 17)