failed attempts with close thesis

index.html

@@ -110,10 +110,11 @@ Through the map, we give shape to a common context in Turkish culture. The map a
       <script src="static/js/d3_map.js"></script>
     </div>
 
-        <div w3-include-html="thesis.html" class="draggable thesis" id="thesis">
+<div id="nothesis">
+        <div w3-include-html="thesis.html" id="thesis" class="draggable thesis">
         </div>
-        <!-- <span onclick="this.parentElement.style.display='none'" id="thesisX" class='topleft'>&times</span> -->
-
+        <!-- <span onclick=closethesis() class="thesisX" >&times</span><span onclick=closethesis() class="thesisX" >&times</span> -->
+</div>
   </div>
 
 
@@ -204,7 +205,7 @@ includeHTML();
 
 
 
-  function closevideo (){
+  function closevideo(){
     $("#showvideo").hide()
     $('iframe').each(function(index) {
        $(this).attr('src', $(this).attr('src'));
@@ -212,6 +213,16 @@ includeHTML();
      });
    }
 
+   function closebio(){
+     $("#showbio").hide()
+    }
+
+    // function closethesis(){
+    //   $("#nothesis").fadeOut()
+    //  }
+
+
+
 
 
 
@@ -234,42 +245,6 @@ $("#about").click(function(){
 </script>
 
 
-<!-- scaleable wrapper -->
-<!-- <script>
-var $el = $("#thesis");
-var elHeight = $el.outerHeight();
-var elWidth = $el.outerWidth();
-
-var $wrapper = $("#scaleable-wrapper");
-
-$wrapper.resizable({
-resize: doResize
-});
-
-function doResize(event, ui) {
-
-var scale, origin;
-
-scale = Math.min(
-  ui.size.width / elWidth,
-  ui.size.height / elHeight
-);
-
-$el.css({
-  transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
-});
-
-}
-
-var starterData = {
-size: {
-  width: $wrapper.width(),
-  height: $wrapper.height()
-}
-}
-doResize(null, starterData);
-</script> -->
-
 
 </div>
 </body>

static/css/style.css

@@ -351,7 +351,6 @@ h2 {
   top:10%;
   padding: 0.5%;
   background-color: transparent;
-  position: absolute;
   z-index: 5;
   border: 1px black solid;
   opacity: 0.4;
@@ -370,7 +369,6 @@ h2 {
   bottom: 10%;
   padding: 2%;
   background-color: transparent;
-  position: absolute;
   z-index: 5;
   border: 1px black solid;
   overflow-y: scroll;
@@ -406,12 +404,15 @@ h2 {
   color: black;
 }
 
-#thesisX {
+.thesisX {
   position: absolute;
   z-index:5;
-  left: 480px;
+  left: 26%;
   top: 14%;
-  display: none;
+  float: right;
+  cursor: pointer;
+  font-size: 100%;
+  color: black;
 }
 
 
@@ -478,6 +479,7 @@ color: #d81159;
 
 .node text:hover {
   cursor: pointer;
+  font-style: italic;
 }
 
 .active {

static/js/d3_map.js

@@ -69,10 +69,10 @@ d3.json("/static/js/group1.json", function(error, json) {
       console.log('vid')
       if (i.url) {
         divVideo.transition().duration(100);
-        divVideo.html("<div id='showvideo'><span onclick=closevideo() class='topleft'> &nbsp; &times&nbsp;</span><iframe id='video" + i.id + "' width='300' height='150' src='" + i.url + "' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>");
+        divVideo.html("<div class='draggable' id='showvideo'><span onclick=closevideo() class='topleft'> &nbsp; &times&nbsp;</span><iframe id='video" + i.id + "' width='300' height='150' src='" + i.url + "' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>");
       };
       divBio.transition().duration(100);
-      divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> &nbsp; &times&nbsp;</span><div id='bio" + i.id + "'>" + i.bio + "</div>");
+      divBio.html("<div class='draggable' id='showbio'><span onclick=closebio() class='topleft'> &nbsp; &times&nbsp;</span><div id='bio" + i.id + "'>" + i.bio + "</div>");
       popup(i.id, i.time);
     })
     .on("dblclick", connectedNodes)
@@ -142,7 +142,6 @@ d3.json("/static/js/group1.json", function(error, json) {
     $("#show" + name).fadeIn()
     console.log("around")
     $("#thesis").fadeIn()
-    $("#thesisX").fadeIn()
     $("#bio" + name).fadeIn()
    var dada = document.getElementById("text" + name);
    dada.className += " active";