You previously used the href attribute
of help links to inform the help system of what content to load. To implement this feature,
you can examine the href attributes further to pull out the anchor portion of the href. This
will give you the ID of the section you need to scroll to. You??™ll need to update the openWith()
method of the Help object:
Help = {
openWith : function(url) {
var urlParts = url.split('#');
var path = urlParts[0], anchor = urlParts[1];
this.request(url, function() {
if ($(document.body).hasClassName('with-help') == false) this.open();
if (anchor && anchorEl = $(anchor)) {
anchorEl.scrollTo();
anchorEl.addClassName('highlighted');
}
});
},
...
CHAPTER 9 n A DYNAMIC HELP SYSTEM 204
First, you split out the path and anchor portions of the URL using split(). Once you
have the anchor portion of the URL you can initiate a request for the page as normal, but
this time the callback is slightly different. If there is an anchor, and that element exists, you
can use Prototype??™s scrollTo() method to scroll the browser window down to the relevant
section. It very closely mimics the browser??™s default behavior for anchors. Finally, you add
the highlighted class name on to that element, which enables you to apply some extra styles
to the anchored element.
Looking Back
In this chapter you??™ve seen that with the power of Prototype and Low Pro, and a little bit of
help from Rails, you achieved quite a lot with a minimal amount of complexity.
Pages:
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286