Skip to content

Instantly share code, notes, and snippets.

Created May 10, 2011 03:15
Show Gist options
  • Save jkeefe/963845 to your computer and use it in GitHub Desktop.
Save jkeefe/963845 to your computer and use it in GitHub Desktop.
Customized DocumentCloud Viewer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<head><title id="maintitle">Document Viewer</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<link href="css/document-cloud.css" media="all" rel="stylesheet" type="text/css">
Customized document viewer for use with DocumentCloud, at
Built on a version from the Chicago Tribune team,
Made for use at WNYC,
This version is also kept at:
Use at your own risk, improve as you see fit, and let me know if you do!
To use, see:
John Keefe
john at
<style type="text/css">
body { font-family:Arial,Helvetica,sans-serif; margin:0; padding:0; overflow: hidden;}
#header {padding:5px 12px 12px;}
#banner-logo {float:right; border:0; margin-top:3px; margin-bottom:3px;}
#document { clear: both; width: 100%; }
#title {margin:0; font-size:1.4em;}
#back {margin:0; font-size:.9em; font-weight:bold;}
#document-source {margin:1px 0 3px; font-size:.8em;}
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/jquery.url.min.js"></script>
<script type="text/javascript" charset="utf-8">
// function called on load
function init () {
// get the document id from the url, using jquery.url.min.js
// so from
// we get '29933-rahm-ruling'
var documentcloud_id = $.url.param("doc");
// build the documentcloud url
var documentcloud_url = "" + documentcloud_id + ".js";
// NOTE! The page doesn't make sure the document id is valid or that the document is
// public. It probably should. If you have code to do that, let me know!
// assign the document loader to varible 'viewer'
var viewer = DV.load(documentcloud_url, {
container : 'div#document',
embedded : true,
// after the document loads ...
afterLoad : function(viewer) {
// ... get its title, and put it on the page and in the title bar
var document_title = viewer.api.getTitle();
// ... get its source, and put it in if it exists
var document_source = viewer.api.getSource();
var document_source_html = "Source: " + document_source
if(document_source != null)
// ... show the link to the related article, if it exists
var related_article_url = viewer.api.getRelatedArticle();
var related_html = "<a id='back-link' rel='external' href='" + related_article_url + "'>&laquo; Go to the related story.</a>";
if(related_article_url != null)
<body onload="init();">
<div id="header">
<!-- Next up is the logo info.
Change the href to point to your site's url
and the src field to point to your logo image
It's set up to use a logo 60 pixels tall -->
<a rel="external" href=""><img id="banner-logo" src="images/logo_document_banner.png" alt="Logo"></a>
<h1 id='title'><div id='titletext'>&nbsp;</div></h1>
<p id="document-source">&nbsp;</p>
<p id='back'><div id='article-link'></div></p>
<!-- The document is loaded into the next line -->
<div id="document">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment