CHAPTER 8 n CASE STUDY: FAQ FACELIFT 172
Layer 2: JavaScript Boogaloo
The CSS-based interaction you created is pretty good, but you can spruce it up and give it
some flair. I??™ve always liked the accordion-type effects that you see on some of the more
Web 2.0-y sites, but that effect alone won??™t quite meet your needs. You can, however, use the
basic concept and tailor it to your purposes. In this section, you??™ll create a JavaScript-based
interaction for the FAQ that does the following:
??? Triggers the answers to slide open when the corresponding question is clicked
??? Enables one answer to reference another (triggering the reference to open without
closing the original question, so the reference isn??™t lost)
??? Keeps each question and answer pair bookmarkable
??? Scrolls the window to bring focus to the newly opened answer
You??™ll use a few libraries and some other assorted helpers to get the job done:
??? Prototype and Moo.fx for Prototype (http://moofx.mad4milk.net/) will provide some
assistance to you in the general construction and animation of the script.
??? To get the script going as soon as the page loads, you??™ll use Jesse Skinner??™s
addDOMLoadEvent() (www.thefutureoftheweb.com/blog/adddomloadevent).
??? To help you with debugging, I included jsTrace (http://code.google.com/p/
easy-designs/wiki/jsTrace).
All this code has been included in the project files.
Pages:
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246