Joe Spurr

I live in Boston and work toward transparency.

About / Twitter | Photography \ Bookmarks

jQuery Paragraph Permalinks

Want to make your site more citable? Offer paragraph permalinks so users can easily reference specific sections of your content. This is particularly useful for news sites that post long interview transcripts or government or non-profit organizations that publish large documents.

Using straightforward JavaScript and CSS, I offer to you a way to automate this for your main story content.

The jQuery

Paste this into the head section of the template in your CMS that builds your site’s article page:

The CSS

Paste into your site’s main stylesheet:

Within these code snippets, replace all instances of “entry-content” with the unique div class that bookends your main content.

That’s it!

Notes

This is plug-and-playish but remember to be as specific as possible when targeting your content div. Look at your HTML and replace “entry-content” with something unique that reflects your semantic HTML. For instance, use “.story-page .transcript .entry-content” to add specificity and only trigger this permalink behavior on paragraphs that live inside the entry-content div, which lives inside the transcript div, which lives inside the story-page div. Ya ~~div~~ dig?

jQuery is a JavaScript library. Though these code pastes include links to Google’s hosted jQuery file, and should work fine, you should nonetheless download jQuery, upload it to your site’s server, and point at it in the first line of the jQuery provided above.

Anyone should be able to employ this since jQuery is platform agnostic and the most widely employed JavaScript library today. The code above will append a click-able paragraph symbol at the end of each paragraph, which is visible on hover over the graph. I realize this is problematic for touch/tablet devices. Feel free of course to adjust the code as you see fit.

Example page

Here’s a very basic example page. Good luck and let me know how it goes.

Update from @hober: federali.st is an amazing example of the usefulness of paragraph permalinks.
- #code
- #javascript
- #jquery
- #journalism
13 Dec 2011