match( /#/ )||
!$( href.replace( /.*?#(.*)/, "FAQ_$1" ) ) ) return;
// set the event handler
Event.observe( a, 'click', function( e ){
var el = Event.element( e );
var id = 'FAQ_' + el.getAttribute( 'href' ).replace( /.*?#/, '' );
...cut...
}.bind( this ), false );
}.bind( this ) ); // End ANCHOR loop
}.bind( this ) ); // End DL loop
// See if we have a bookmark situation
if( window.location.toString().indexOf( '#' ) != -1 ){
var id = 'FAQ_' + window.location.hash.toString().replace( /#/, '' );
trace( 'loading with bookmark: ' + id );
if( !$( id ) ){
trace( "can't find " + id );
} else {
this.to_open = id;
this.open();
}
}
},
The first change is to rewrite the id of the dd in the dd loop. Then, in the anchor loop, you
make sure that it does the transposition of the id referenced in the anchor (that is, the original
one) to the newly created id ('FAQ_' + the original one). This keeps everything working nicely
in the script??™s normal operations.
The final step is to add the handler for an id reference existing in the URI (that is, an answer
that has been bookmarked or directly linked to). You transpose the fragment identifier into the
new id schema and then test its existence. If it exists, you open it. Easy, peasy.
Save your work, refresh your browser, and take a look. There you have it: a beautiful, progressively
enhanced FAQ.
Summary
This case study walked you through the creation of a progressively enhanced FAQ interface.
Pages:
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264