Subtitles can now be toggled. Also added credits.

toolness · Sep 23, 2011 · 9363cc3 · 9363cc3
1 parent cfb1919
commit 9363cc3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 9 deletions.
diff --git a/static-files/index.html b/static-files/index.html
@@ -3,6 +3,7 @@
 <title>Modern vs. Postmodern</title>
 <style>
 #content {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   width: 640px;
   margin: 0 auto;
 }
@@ -18,33 +19,59 @@
   width: 640px;
 }
 
+#subtitle {
+  position: absolute;
+  font-size: 10pt;
+  height: 3em;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
 #voiceover {
   width: 100%;
-  height: 64px;
+  height: 48px;
 }
 
-#subtitle {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 9pt;
-  color: black;
-  padding: 10px;
-  margin: 4px;
+#subtitle-toggle {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+#credits, #subtitle-toggle {
+  text-align: center;
+  font-size: 8pt;
+}
+
+#credits {
+  color: gray;
 }
 
 h1 {
   text-align: center;
   font-family: "Futura", "Lucida Console", serif;
   font-size: 48pt;
 }
+
+a {
+  color: inherit;
+}
 </style>
 <img src="ajax-loader.gif" id="throbber">
 <div id="content" style="display: none">
   <div id="script" style="display: none"></div>
-  <div id="visual-container"><div id="visual"></div></div>
+  <div id="visual-container">
+    <div id="visual"></div>
+    <div id="subtitle" style="display: none"></div>
+  </div>
   <audio id="voiceover" controls preload="auto">
     <source src="script.ogg"></source>
   </audio>
-  <div id="subtitle"></div>
+  <div id="subtitle-toggle">Show subtitles</div>
+  <div id="credits">
+    This mini-presentation is based on writing by <a href="http://blog.ianbicking.org/">Ian Bicking</a>.
+  </div>
 </div>
 <script src="jquery.min.js"></script>
 <script src="popcorn-complete.min.js"></script>

diff --git a/static-files/play-script.js b/static-files/play-script.js
@@ -1,6 +1,13 @@
 $(window).ready(function() {
   var scriptLoaded = $("#script").load("script.html");
   var durationsLoaded = jQuery.getJSON("script.json");
+  $("#subtitle-toggle").click(function() {
+    $("#subtitle").fadeToggle();
+    if ($(this).text() == "Show subtitles")
+      $(this).text("Hide subtitles")
+    else
+      $(this).text("Show subtitles")
+  });
   jQuery.when(durationsLoaded, scriptLoaded).then(function(durations) {
     var i = 0;
     var currTime = 0;