By Mat Marquis CHAPTER 5We needed a baseline, strictly markup means of allowing a user to
opt into content on the site, which was simpler than it might sound. As
one would expect, all the links in the primary navigation take the user to
a landing page containing all the same content: featured articles, recent
articles, and navigation for each subsection. The drop-down menus are a
nice convenience, but not essential for navigating the site. It made sense
to treat these drop-down menus as enhancements, and load them via
JavaScript only as they were needed.
To lazily load other pieces of inessential content on the Globe site
without introducing any barriers to access, and inspired by the approach
we took to the drop-down menus, we developed a simple markup-driven
JavaScript pattern named AjaxInclude^6. AjaxInclude enhances links by
using them to fetch a fragment of the linked content. The anchor tag
itself serves as the fallback, ensuring that users will be able to access the
underlying content whether or not JavaScript is available, but also provides
all the information our script would need to fetch the related content and
apply it to the page: the location of the document fragment to be used in
place of the link; and how that content should be injected into the current
page relative to the position of the link.
To replace the link with the injected markup:
To insert the content before the link’s position in the source:
To insert the content after to the link’s position in the source: