{"id":953,"date":"2012-12-01T22:54:01","date_gmt":"2012-12-02T04:54:01","guid":{"rendered":"http:\/\/www.mooreds.com\/wordpress\/?p=953"},"modified":"2012-12-01T22:55:09","modified_gmt":"2012-12-02T04:55:09","slug":"timelinejs-installation-tips","status":"publish","type":"post","link":"https:\/\/www.mooreds.com\/wordpress\/archives\/953","title":{"rendered":"TimelineJS installation tips"},"content":{"rendered":"<p><a href=\"http:\/\/timeline.verite.co\/\">TimelineJS<\/a> is a JS library for making fantastic looking timelines. \u00a0The data that drives these timelines can be in JSON or in google spreadsheets.<\/p>\n<p>I wanted to install this on a site I manage, but ran into a couple of issues.<\/p>\n<p>First, there&#8217;s not great installation instructions. \u00a0Basically, you need to download the <a href=\"https:\/\/github.com\/VeriteCo\/TimelineJS\">source from github<\/a>\u00a0and then copy the &#8216;compiled&#8217; directory wherever you want the files to go.<\/p>\n<p>I got the files installed, then cribbed from the <a href=\"https:\/\/github.com\/VeriteCo\/TimelineJS\/blob\/master\/examples\/example_googlespreadsheet.html\">google spreadsheet example<\/a>.<\/p>\n<p>Then, I kept seeing this error in the javascript console: \u00a0<code>ReferenceError: VMM is not defined<\/code>. \u00a0(That is the Firefox error message&#8211;Chrome had one that was slightly different.) \u00a0Looking in the chrome javascript console revealed that some js and css files were not being downloaded&#8211;they were 404ing. \u00a0Adding the <code>js<\/code> and <code>css<\/code> config options with full paths to the <code>timeline-min.js<\/code> and <code>timeline.css<\/code> files fixed this error.<\/p>\n<p>The last issue I ran into was that the div into which I was putting the timeline was not 100% of the height of the page. \u00a0I wanted other content around it. \u00a0But the timeline wasn&#8217;t showing up at all. \u00a0I fixed this issue by putting another div around the timeline containing div, and setting the outer div&#8217;s height explicitly. \u00a0Then I made the containing div&#8217;s height 100%.<\/p>\n<p>Hope these tips help someone out.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TimelineJS is a JS library for making fantastic looking timelines. \u00a0The data that drives these timelines can be in JSON or in google spreadsheets. I wanted to install this on [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[54],"tags":[],"class_list":["post-953","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/comments?post=953"}],"version-history":[{"count":3,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/953\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/953\/revisions\/955"}],"wp:attachment":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/media?parent=953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/categories?post=953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/tags?post=953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}