Skip to content
Dynamic display of annotated quotes from We Make the Road By Walking
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

We Make The Read by Annotating

Dynamic Cover

Dynamic display of annotated quotes from the annotation activity of We Make the Road By Walking. See it in action at

Data is read via json from the Google Spreadsheet created by Adam Croom.

The quotes are all selections that have been annotated and are loaded in realtime. Clicking on either Myles or Paulo on the interface, slides the other man off stage, and loads one quote randomly on display. Clicking the figure will pull the man back on stage, and load two now quotes combined behind them.

I cannot explain exactly why I did this; on seeing the figures on the cover of the book, I thought first to do an animated GIF. But I wondered how much was possible with CSS and Javascript.

The background image is sized to the window using the jQuery Backstretch plugin. The rest of the CSS and Javascript is my clumsy effort to make it work. There are some funky things on the click areas.

Thanks to Tom Woodward for giving my a leg up on the Google Spreadsheets json query.

You can’t perform that action at this time.