alicestrt/vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fixed conflict in index about menu

Browse Source
This commit is contained in:
alicestrt 2021-03-03 20:13:19 +01:00
commit ac05380e30
4 changed files with 46 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
index-fixed.html
View File

@ -1,152 +0,0 @@
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>VVVW</title>
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/p5/p5.min.js"></script>
<script src="static/js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="static/js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="static/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="static/js/jquery-1.12.4.js"></script>
<script src="static/js/jquery-ui.js"></script>
<script src="static/js/d3.v3.min.js"></script>
</head>
<body>
<div class="container-fluid p-0">
<div class="bg">
<div class="row">
<div class="col-md-7">
<div class="map_area">
<script src="static/js/d3_map.js"></script>
</div>
<div class="row">
<div class="col-md-12">
<p id="legend_title">Map legend</p>
<div class="map_legend">
<div class="box1"></div> <p>Folklore literature</p>
<div class="box2"></div> <p>Islamic Mysticism</p>
<div class="box3"></div> <p>Contemporary poets</p>
<div class="box4"></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="scrollable">
<div class="row">
<div class="col-md-12">
<div w3-include-html="thesis.html" class="thesis">
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="media_area">
<!-- <p>Related media</p> -->
<div id="showdadaloglu"><div class='text_audio'>Bio</div>
<!-- <audio id="audiodadaloglu" controls>
<source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio> -->
<img src="static/images/poem.png">
</div>
<div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="play-stop">
<div id="tracktime">0:0 / 22:39</div>
<a id="mBtn" onclick="PSFunction()">(Play)</a>
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
</div>
<div class="main_audio">
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
</div>
</div>
</div>
<!-- scripts for mouse events -->
<script>
var audio = document.getElementById("audioBG");
var btn = document.getElementById("mBtn");
function PSFunction() {
if (audio.paused) {
audio.play();
btn.innerHTML = "(Pause)";
} else {
audio.pause();
btn.innerHTML = "(Play)";
}
}
</script>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
includeHTML();
</script>
</div>
</body>
</html>

59
index.html
View File

@ -22,15 +22,17 @@
<div class="row"> <div class="row">
<div class="col-md-4"><div id="title_website"><a href="/">Wells of Knowledge</a></div></div> <div class="col-md-4"><div id="title_website"><a href="/">Wells of Knowledge</a></div></div>
<div class="col-md-3 offset-md-5" id="menu"> <div class="col-md-3 offset-md-5" id="menu">
<span id="about"> <span id="about">
<a href="#" >about</a> | <a href="#" >about</a> |
</span> </span>
<span id="colophon"> <span id="colophon">
<a href="#" >colophon</a> | <a href="#" >colophon</a> |
</span> </span>
<span id="how">
<a href="#" >how to use</a> <span id="how">
</span> <a href="#" >how to use</a> |
</span>
</div> </div>
</div> </div>
@ -41,10 +43,10 @@
<div class="col-md-12"> <div class="col-md-12">
<br> <br>
<div class="map_legend"> <div class="map_legend">
<div id="box1" onclick="popup_bg(600)"><i class="box fa fa-play"></i></div> <p>Folklore literature</p> <div id="box1" onclick="popup_bg(600,1460)"><i class="box fa fa-play"></i></div> <p>Folklore literature</p>
<div id="box2" onclick="popup_bg(1465)"><i class="box fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p> <div id="box2" onclick="popup_bg(1465,1770)"><i class="box fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
<div id="box3" onclick="popup_bg(0)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p> <div id="box3" onclick="popup_bg(0,600)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
<div id="box4" onclick="popup_bg(3960)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p> <div id="box4" onclick="popup_bg(3960,3960)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
</div> </div>
</div> </div>
</div> </div>
@ -158,18 +160,12 @@ Through the map, we give shape to a common context in Turkish culture. The map a
</div> </div>
</div> </div>
<span id="colophon">
<a href="#" >colophon</a>
</span>
<span id="how">
<a href="#" >how to use</a>
</span>
</div> </div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
var a = 3; var a = 3;
var dragOpts = { var dragOpts = {
@ -191,15 +187,24 @@ $(document).ready(function() {
<!-- scripts for mouse events --> <!-- scripts for mouse events -->
<script> <script>
function popup_bg(time) { function popup_bg(start,end) {
var myIcon = document.querySelector(".audioBG"); var myIcon = document.querySelector(".audioBG");
var box = document.getElementById("audioBG"); var box = document.getElementById("audioBG");
if (box.paused) { if (box.paused) {
box.currentTime = start;
myIcon.className = "audioBG fa fa-pause"; myIcon.className = "audioBG fa fa-pause";
box.play(); box.play();
console.log(box.currentTime);
// the below setInterval is to check the currentTime is greater than 56 or not in every 1 second
setInterval(function(){
if(box.currentTime>end){
myIcon.className = "audioBG fa fa-play";
box.pause();
}
},1000);
}; };
box.currentTime = time; // box.currentTime = start;
console.log(time); // console.log(start);
}; };
</script> </script>
<script> <script>
@ -279,8 +284,16 @@ includeHTML();
$("#showbio").hide() $("#showbio").hide()
$("#nothesis").hide() $("#nothesis").hide()
$("#showvideo").hide() $("#showvideo").hide()
$("#closeall").hide()
} }
function startaudio(){
var box = document.getElementById("audioBG");
box.currentTime=3384;
}
window.onload = startaudio();
$("#about").click(function(){ $("#about").click(function(){
$("#showabout").fadeIn() $("#showabout").fadeIn()

9
static/css/style.css
View File

@ -235,6 +235,10 @@ a :hover {
} }
#closeall {
display: none;
}
/* text area */ /* text area */
/* with position:fixed and svg {position:relative} the text can overlay the map */ /* with position:fixed and svg {position:relative} the text can overlay the map */
.thesis { .thesis {
@ -471,8 +475,13 @@ font-size: 16px;
position: absolute; position: absolute;
right: 50px; right: 50px;
top:30px; top:30px;
<<<<<<< HEAD
} }
*/ */
=======
}*/
>>>>>>> a4c562a74b0d98a69fcba45d31accdddf753cd2e
#about a { #about a {
text-decoration: none; text-decoration: none;

1
static/js/d3_map.js vendored
View File

@ -142,6 +142,7 @@ d3.json("/static/js/group1.json", function(error, json) {
console.log("around") console.log("around")
$("#nothesis").fadeIn() $("#nothesis").fadeIn()
$("#thesis").fadeIn() $("#thesis").fadeIn()
$("#closeall").fadeIn()
$("#bio" + name).fadeIn() $("#bio" + name).fadeIn()
var dada = document.getElementById("text" + name); var dada = document.getElementById("text" + name);
dada.className += " active"; dada.className += " active";