Finally,
this addition uses Prototype??™s Element.getHeight() method to store the current height
of the dd in its openHeight property and then uses the fx.Style object??™s set() method
to set the height of each dd to 0, thereby collapsing them.
CHAPTER 8 n CASE STUDY: FAQ FACELIFT 178
nNote All the calls to bind( this ) help maintain proper scope for this within the loops and the effect.
Whenever this is used within this script, it refers to the FAQ object.
9. If you were to refresh the browser at this point, you??™d see a terrible mess because you
shrank the height of the dd, but didn??™t tell it to hide any of the content that overflows its
box. One minor addition to the style sheet covers it:
.faq.on dd {
margin-top: 0;
padding-top: 0;
overflow: hidden;
}
10. Another refresh, and everything??™s golden; the dd elements are collapsed and none of
the content is sticking out. Now it??™s time to tackle those anchors.
11. Handling the anchors is not overly complex. You can loop through and collect all
the anchors inside the dl and then determine whether you need to set an onclick
event handler by asking whether or not the href contains an in-page id reference
and whether that id actually exists (just to be sure). If you need to set the event
handler, use Prototype??™s Event.observe() and determine whether the anchor is a
question within that handler (which should close any open answers and scroll to
and open its own) or a reference to another question (in which case, it should just
open the new answer and scroll to it).
Pages:
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253