unsuccesful try outs

index.html

@@ -23,14 +23,8 @@
     <div class="col-md-4"><div id="title_website">Wells of Knowledge</div></div>
       <div class="col-md-3 offset-md-5" id="menu">
     <span id="about">
-     <a href="#" >about</a> |
+     <a href="#" >about</a>
    </span>
-    <span id="colophon">
-     <a href="#" >colophon</a> |
-   </span>
-   <span id="how">
-    <a href="#" >how to use</a>
-  </span>
   </div>
 
   </div>
@@ -54,7 +48,7 @@
     <button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button>
 <audio id="audioBG"
 preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
-<source src="static/audio/HNI_Soundinstall_3tracks_together.webm" type="audio/mpeg">
+<source src="static/audio/HNI_Soundinstall_3tracks_together.webm">
 </audio>
 <input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
 </div>
@@ -83,7 +77,6 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
       <!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
 
       <!-- popups about and colophon -->
-    </div>
       <div id="showabout" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h2>Wells of Knowledge</h2><p>
 This web platform is a publishing moment/fragment of the work "Volitional Volutions of the Volatile Waters" by Merve Kilicer. <br>
 How can oral knowledge can be 'recorded', 'documented', 'transferred' through a digital online space? This is the question that drove the research behind this website, which has the map of connections as the main navigation point. The visualisation is inspired by the common history and references that people in Gezi Park shared during the 2013 occupation. Their presence together in the square became a melange of their different voices, slogans, poems and memories. "Could the accumulation of these voices and words be the forming substances of Gezi Spirit?"
@@ -139,7 +132,7 @@ Through the map, we give shape to a common context in Turkish culture. The map a
     </div>
       </div>
 
-      <div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h3>How to use</h3>
+      <div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h2>How to use</h2>
         <p>This website is best displayed on a desktop, using the latest available Firefox version.</p>
         <p>
         The map shows connections between various representatives in Turkish culture, be it poets, authors or musicians, traditional or contemporary.</p> <p>Each name is presented in relation to a song, a poem, an image, or a fragment of text or audio.</p>
@@ -148,15 +141,23 @@ Through the map, we give shape to a common context in Turkish culture. The map a
       </div>
 
       <script src="static/js/d3_map.js"></script>
-    </div>
+
+  </div>
+
 
 <div id="nothesis">
         <div w3-include-html="thesis.html" id="thesis" class="draggable thesis">
         </div>
-</div>
   </div>
+</div>
 
+           <span id="colophon">
+     <a href="#" >colophon</a>
+   </span>
 
+      <span id="how">
+    <a href="#" >how to use</a>
+  </span>
 
 </div>
 </div>

static/css/style.css

@@ -59,6 +59,7 @@ body {
   margin-left: 20px;
   position: relative;
   
+
   /*border-top: 1px dashed #d81159;*/
 }
 .media_area {
@@ -433,16 +434,37 @@ h2 {
 
 
 /* about and colophon */
-#menu {
+/*#menu {
   margin-top: 15px;
+}*/
 
-}
 #about, #colophon, #how {
 font-family:'Walter Turncoat', cursive;
 color: #d81159;
 font-size: 16px;
 }
 
+#colophon {
+  position: absolute;
+  left: 50px;
+  bottom:15px;
+  z-index: 5;
+}
+
+#how {
+  position: absolute;
+  right: 50px;
+  bottom:15px;
+  z-index: 5;
+}
+
+#about {
+    position: absolute;
+  right: 50px;
+  top:15px;
+}
+
+
 #about a {
 text-decoration: none;
 color: #d81159;

static/js/d3_map.js

@@ -13,6 +13,7 @@ var force = d3.layout.force()
   .size([width, height]);
 
 
+
 d3.json("/static/js/group1.json", function(error, json) {
   if (error) throw error;
 
@@ -53,11 +54,10 @@ d3.json("/static/js/group1.json", function(error, json) {
     });
 
 
+
   var divVideo = d3.select("body").append("div").style("opacity", 1);
   var divBio = d3.select("body").append("div").style("opacity", 1);
 
-
-
   node.on({
       "mouseover": function(d) {
         d3.select(this).style("cursor", "pointer");
@@ -100,9 +100,6 @@ d3.json("/static/js/group1.json", function(error, json) {
 
   });
 
-
-
-
   // highlight NodeLists//Toggle stores whether the highlighting is on
   var toggle = 0;
   //Create an array logging what is connected to what