-
Bio
+
-
-
+
diff --git a/wells/static/css/style.css b/wells/static/css/style.css
index 57d5135..74cc4d5 100644
--- a/wells/static/css/style.css
+++ b/wells/static/css/style.css
@@ -201,7 +201,7 @@ overflow-y: scroll;
max-height: 300px;
max-width: 30%;
scroll-behavior: smooth;
-font-size: .6em;
+font-size: .9em;
border: 1px black solid;
padding: 1.5em;
margin-right: 10px;
@@ -321,16 +321,29 @@ h2 {
/* pop up */
-#show_video_bio {
+#showvideo {
/* display: none; */
- right: 10px;
+ right: 6%;
top:10%;
- width: 30% !important;
- position: relative;
+ padding: 2%;
+ background-color: white;
+ position: absolute;
+ z-index: 5;
+ border: 1px black solid;
+}
+
+#showbio {
+ /* display: none; */
+ right: 10%;
+ top:80%;
+ padding: 2%;
+ background-color: white;
+ position: absolute;
z-index: 5;
border: 1px black solid;
}
+
/* .bio{
margin-bottom: 1.2em;
margin-top: 2em;
@@ -369,7 +382,6 @@ color: #AEB10A;
#showabout, #showcolophon {
display: none;
- left: 20%;
/* background-image: url("../images/poster1.png"); */
background-color: white;
word-wrap: break-word;
@@ -381,6 +393,16 @@ color: #AEB10A;
z-index: 5;
}
+#showcolophon {
+ left: 30%;
+ top:10%;
+}
+
+#showabout {
+ left: 20%;
+}
+
+
/*d3 map*/
.link {
diff --git a/wells/static/images/circleB.png b/wells/static/images/circleB.png
index 962d99a..31cb59b 100644
Binary files a/wells/static/images/circleB.png and b/wells/static/images/circleB.png differ
diff --git a/wells/static/js/d3_map.js b/wells/static/js/d3_map.js
index fbec5a0..5fc307e 100644
--- a/wells/static/js/d3_map.js
+++ b/wells/static/js/d3_map.js
@@ -26,22 +26,70 @@ d3.json("/static/js/group1.json", function(error, json) {
.enter().append("line")
.attr("class", "link");
-var div = d3.select("body").append("div").style("opacity", 1);
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", function(d){return "node group" + d.group})
- .attr("id", function(d){return d.id})
- .on("click", function(i){
- // popup video
- div.transition().duration(100);
- div.html("
");
- // rest pop up
- popup(i.id,i.time);
- })
- .on("dblclick",connectedNodes)// Added code
- .call(force.drag);
+ .attr("id", function(d){return d.id});
+
+ node.append("image")
+ // .attr("xlink:href", "/static/images/squig2.png")
+ .attr("xlink:href", "/static/images/circleB.png")
+ .attr("x", -8)
+ .attr("y", -8)
+ .attr("width", 16)
+ .attr("height", 16);
+
+ node.append("text")
+ // .attr("xlink:href", "#")
+ .attr("dx", 12)
+ .attr("dy", ".35em")
+ .text(function(d) { return d.name });
+
+// let drag = d3.behavior.drag();
+// var drag = d3.behavior.drag()
+// .on("drag", function() {
+// var x = d3.event.x;
+// var y = d3.event.y;
+// d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
+// });
+
+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");
+ }})
+ .on("click", function(i){
+ // popup video
+ divVideo.transition().duration(100);
+ divVideo.html("
×
");
+ divBio.transition().duration(100);
+ divBio.html("
× "+i.bio+"
");
+ // div.on(".drag", null);
+ // span.html("
×");
+ // rest pop up
+ popup(i.id,i.time);
+ })
+ .on("dblclick",connectedNodes);
+
+
+ force.on("tick", function() {
+ link.attr("x1", function(d) { return d.source.x; })
+ .attr("y1", function(d) { return d.source.y; })
+ .attr("x2", function(d) { return d.target.x; })
+ .attr("y2", function(d) { return d.target.y; });
+
+ node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+
+ });
+
+
// under construction
@@ -85,36 +133,8 @@ function connectedNodes() {
//end highlight nodes
- node.append("image")
- // .attr("xlink:href", "/static/images/squig2.png")
- .attr("xlink:href", "/static/images/circleB.png")
- .attr("x", -8)
- .attr("y", -8)
- .attr("width", 16)
- .attr("height", 16);
-
- node.append("text")
- // .attr("xlink:href", "#")
- .attr("dx", 12)
- .attr("dy", ".35em")
- .text(function(d) { return d.name });
-
- node.on({
- "mouseover": function(d) {
- d3.select(this).style("cursor", "pointer");
- }});
-
- force.on("tick", function() {
- link.attr("x1", function(d) { return d.source.x; })
- .attr("y1", function(d) { return d.source.y; })
- .attr("x2", function(d) { return d.target.x; })
- .attr("y2", function(d) { return d.target.y; });
-
- node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
- });
-
// no overlapping
//var padding = 10, // separation between circles
@@ -146,7 +166,8 @@ function connectedNodes() {
//}
// scripts for mouse events
-var stopVideo = function (name) {
+// var stopVideo = function (name) {
+function stopVideo(name) {
var iframe = document.querySelector( 'iframe');
var video = document.getElementById( "#video"+name );
if ( iframe !== null ) {
@@ -190,15 +211,26 @@ function popup(name,time) {
stopVideo("#asikA");
};
+ });
+
+ // $(document).click(function (e) {
+ // if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
+ // $("#showdadaloglu").fadeOut();
+ // $("#audiodadaloglu").trigger('pause');
+ // // var textdada = document.getElementById("textdadaloglu");
+ // // textdada.classList.remove("active");
+ // };
+ // if (!$(e.target).parents().andSelf().is('#asikA')) {
+ // $("#showasikA").fadeOut();
+ // $("#audioasikA").trigger('pause');
+ // // var textasikA = document.getElementById("textasikA");
+ // // textasikA.classList.remove("active");
+ // stopVideo("#asikA");
+ // };
+ //
+ // });
- // if (!$(e.target).parents().andSelf().is('#asikV')) {
- // $("#showasikV").fadeOut();
- // $("#audioasikV").trigger('pause');
- // var textmuh = document.getElementById("textasikV");
- // textmuh.classList.remove("active");
- // };
- });
});