added more styling in hover/tabs/buttons

master
Angeliki 6 years ago
parent b7f11f41ee
commit 8dd13722ea

@ -3,6 +3,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<!-- <link href="styles/app.css" rel="stylesheet" type="text/css"> <!-- <link href="styles/app.css" rel="stylesheet" type="text/css">
--> -->
</head> </head>
@ -39,13 +42,13 @@
</div> </div>
</div> </div>
<div class="tooltip-wrap"> <!-- for about -->
<p style="font-size: 28px;margin-right: 90%;">About</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tooltip-content-down" style="font-size: 28px;max-width: 1000px;"> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
It is a collection of audio recordings coming from meetings I co-organised, internet sources, podcasts and soundwalks. 'Revisiting podcasts' questions the establishment of authoritative/male voices that create exclusive speech platforms, along the assumption that voices have to be rational, authoritative (voice of expertise) etc. The intervention that changes the paradigm becomes a set of podcasts that revisit the sound material produced in situated amplification meetings and soundwalks. Every podcast includes the previous one, on a way that creates repetetive layers of the same material. Creating presence by repetetion.'Revisiting podcasts' are upsetting binaries such as male/female, expert/amateur, rational/irrational <a style="font-size: 28px;margin-right: 90%;" href="#" title="It is a collection of audio recordings coming from meetings I co-organised, internet sources, podcasts and soundwalks. 'Revisiting podcasts' questions the establishment of authoritative/male voices that create exclusive speech platforms, along the assumption that voices have to be rational, authoritative (voice of expertise) etc. The intervention that changes the paradigm becomes a set of podcasts that revisit the sound material produced in situated amplification meetings and soundwalks. Every podcast includes the previous one, on a way that creates repetetive layers of the same material. Creating presence by repetetion.'Revisiting podcasts' are upsetting binaries such as male/female, expert/amateur, rational/irrational">About</a>
</div>
</div>
</div>
<div align="right" ><div style="background-color: pink;width: 300px;">questions arisen:<br> how to approach the gender of voice in matter of terminology?<br>how the community outside of institution interacts with the inside of institution?<br>what conflicts or frictions the technical aspect provokes</div></div> <div align="right" ><div style="background-color: pink;width: 300px;">questions arisen:<br> how to approach the gender of voice in matter of terminology?<br>how the community outside of institution interacts with the inside of institution?<br>what conflicts or frictions the technical aspect provokes</div></div>
@ -55,6 +58,28 @@
<img src="texts/thesis/carson-list.jpg" width="100%"></img> <img src="texts/thesis/carson-list.jpg" width="100%"></img>
</div> </div>
<script>
//This is a naive solution that only handles one tooltip at a time
//You should really move clicked as a data attribute of the element in question
var clicked;
var tooltips = $('a[title]').on('mouseleave focusout mouseover focusin', function(event) {
if (clicked) {
event.stopImmediatePropagation();
}
}).tooltip().click(function() {
var $this = $(this);
var isOpen = $this.data('tooltip');
var method = isOpen ? 'close' : 'open';
$this.tooltip(method);
//verbosity for clarity sake, yes you could just use !isOpen or clicked = (method === 'open')
if (method === 'open') {
clicked = true;
} else {
clicked = false;
}
$this.data('tooltip', !isOpen);
});
</script>
</body> </body>

@ -7,19 +7,33 @@
<body> <body>
<div class="tooltip-wrap" align="center"> <!-- <div class="tooltip-wrap" align="center">
<p style="background-color: lightgrey;width: 200px;">Digital Utterance</p> <p style="background-color: lightgrey;width: 200px;">Digital Utterance</p>
<div class="tooltip-content-down" style="max-width: 1000px;left: 50% !important;"> <div class="tooltip-content-down" style="max-width: 1000px;left: 50% !important;">
How can we engage politically with the exclusion of specific (female) voices from the public sphere through our own voice? Here I document my attempts to create a safe common space of discussing that topic in Leeszaal, that I consider a diverse public space, where we can explore our public voices in situ, and trying out vocal performances. I am doing that together with Christina Karagianni, who is also from Greece and with whom I share similar experiences of silencing. We combine our practices -her practice lies on choreography and mine on social interaction and sound- and try vocal exercises and reading in moments of Leeszaal. Structure of the meetings: reading extracts in random order, discuss peronal associations, warm up, say a personal sentence in any language, transcribe only the vowels, read back the vowels, sing all together the score of vowels. <div class="tooltip-wrap">First experiments<div class="tooltip-content-down">ffff</div></div> How can we engage politically with the exclusion of specific (female) voices from the public sphere through our own voice? Here I document my attempts to create a safe common space of discussing that topic in Leeszaal, that I consider a diverse public space, where we can explore our public voices in situ, and trying out vocal performances. I am doing that together with Christina Karagianni, who is also from Greece and with whom I share similar experiences of silencing. We combine our practices -her practice lies on choreography and mine on social interaction and sound- and try vocal exercises and reading in moments of Leeszaal. Structure of the meetings: reading extracts in random order, discuss peronal associations, warm up, say a personal sentence in any language, transcribe only the vowels, read back the vowels, sing all together the score of vowels.
</div> </div>
</div> </div>
-->
<div class="tab">
<button class="tablinks" style="position: absolute; right: 50%;" onclick="openCity(event, 'utterance')">Digital Utterance</button>
</div>
<div id="utterance" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
<p>How can we engage politically with the exclusion of specific (female) voices from the public sphere through our own voice? Here I document my attempts to create a safe common space of discussing that topic in Leeszaal, that I consider a diverse public space, where we can explore our public voices in situ, and trying out vocal performances. I am doing that together with Christina Karagianni, who is also from Greece and with whom I share similar experiences of silencing. We combine our practices -her practice lies on choreography and mine on social interaction and sound- and try vocal exercises and reading in moments of Leeszaal. Structure of the meetings: reading extracts in random order, discuss peronal associations, warm up, say a personal sentence in any language, transcribe only the vowels, read back the vowels, sing all together the score of vowels.
</p></div>
</div>
<!-- internet resources --> <!-- internet resources -->
<div class="dropdown2" style="left: 20% !important;"> <!-- <div class="dropdown2" style="right: 0;">
<button onclick="myFunction2()" class="dropbtn2" style="width:140px;" >Internet sources</button> <button onclick="myFunction2()" class="dropbtn2" style="width:140px;" >Internet sources</button>
<div id="myDropdown2" class="dropdown-content2"> <div id="myDropdown2" class="dropdown-content2">
<li style="list-style: none;"> <li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be" target="popup" onclick="window.open('https://www.youtube.com/watch?v=HlvfPizooII','popup','width=600,height=600'); return false;">Angela Davis @Occupy</a> <a class="internet" href="https://www.youtube.com/watch?v=HlvfPizooII" target="popup" onclick="window.open('https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be','popup','width=600,height=600'); return false;">Angela Davis @Occupy Wall Street</a>
</li> </li>
<li style="list-style: none;"> <li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be" target="popup" onclick="window.open('https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be','popup','width=600,height=600'); return false;">Judith Butler @Occupy Wall Street</a> <a class="internet" href="https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be" target="popup" onclick="window.open('https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be','popup','width=600,height=600'); return false;">Judith Butler @Occupy Wall Street</a>
@ -35,6 +49,29 @@
</li> </li>
</div> </div>
</div> -->
<div class="tabpink">
<button class="tablinks" style="position: absolute; right: 5%;" onclick="openCity(event, 'internet')">Internet Sources</button>
</div>
<div id="internet" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=HlvfPizooII" target="popup" onclick="window.open('https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be','popup','width=600,height=600'); return false;">Angela Davis @Occupy Wall Street</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be" target="popup" onclick="window.open('https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be','popup','width=600,height=600'); return false;">Judith Butler @Occupy Wall Street</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=SirOxIeuNDE" target="popup" onclick="window.open('https://www.youtube.com/watch?v=SirOxIeuNDE','popup','width=600,height=600'); return false;">Laurie Anderson - Mach 20</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.thisamericanlife.org/667/wartime-radio" target="popup" onclick="window.open('https://www.thisamericanlife.org/667/wartime-radio','popup','width=600,height=600'); return false;">Ballout, D. (2019) Good Morning, Kafranbel, This American Life: Wartime Radio</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=TY96Ma6YdtQ" target="popup" onclick="window.open('https://www.youtube.com/watch?v=TY96Ma6YdtQ','popup','width=600,height=600'); return false;">Vocal performance of Katalin Ladik in the film Berberian Sound Studio, 2012</a>
</li></div>
</div> </div>
@ -174,13 +211,15 @@
<br> <br>
<!-- soundwalk player --> <!-- soundwalk player -->
<section style="margin-top: 500px !important;"> <section style="margin-top: 800px !important;">
<div class="tooltip-wrap" align="center"> <div class="tab">
<p style="background-color: lightgrey;width: 200px;">Feedback Composition/Annotative Recordings/Soundwalks</p> <button class="tablinks" style="position: absolute; right: 50%;top: 80%" onclick="openCity(event, 'feedback')">Feedback Composition</button>
<div class="tooltip-content-down" style="max-width: 1000px;left: 50% !important;">
How can we engage politically with the exclusion of specific (female) voices from the public sphere through our own voice? Here I document my attempts to create a safe common space of discussing that topic in Leeszaal, that I consider a diverse public space, where we can explore our public voices in situ, and trying out vocal performances. I am doing that together with Christina Karagianni, who is also from Greece and with whom I share similar experiences of silencing. We combine our practices -her practice lies on choreography and mine on social interaction and sound- and try vocal exercises and reading in moments of Leeszaal. Structure of the meetings: reading extracts in random order, discuss peronal associations, warm up, say a personal sentence in any language, transcribe only the vowels, read back the vowels, sing all together the score of vowels. <div class="tooltip-wrap">First experiments<div class="tooltip-content-down">ffff</div></div>
</div> </div>
<div id="feedback" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
<p>I walked around Leeszaal and recorded...
</p></div>
</div> </div>
<div class="tooltip-wrap"> <div class="tooltip-wrap">
@ -541,6 +580,23 @@ var dialogueTimings3 = [1,10,13,20,27,31,53,58,135],
; ;
</script> </script>
<!-- scripts for tab button -->
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body> </body>

@ -55,9 +55,8 @@ echo '</p></div></td>'; } ?>
<!-- save the new recordings --> <!-- save the new recordings -->
<?php <!-- <?php
if(!is_dir("recordings")){ if(!is_dir("recordings")){
$res = mkdir("recordings",0777); $res = mkdir("recordings",0777);
} }
@ -70,7 +69,7 @@ $filename = urldecode($_POST['fname']);
$fp = fopen('recordings/'.$filename, 'wb'); $fp = fopen('recordings/'.$filename, 'wb');
fwrite($fp, $decodedData); fwrite($fp, $decodedData);
fclose($fp); fclose($fp);
?> ?> -->

@ -84,20 +84,69 @@ if (navigator.mediaDevices.getUserMedia) {
audio.src = audioURL; audio.src = audioURL;
console.log("recorder stopped"); console.log("recorder stopped");
function saveAudio(){
var req = null;
var url = "../../savefile.php";
var data = document.getElementById("save").audioURL;// document.getElementById("save").innerHTML;// = xhttp.responseText;; // you have to check how to get the data from your saveAudio() method // var url = (window.URL || window.webkitURL).createObjectURL(blob);
window.alert(data); // console.log(url);
(window.XMLHttpRequest) ? req = new XMLHttpRequest() : (window.ActiveXObject) ? req = new ActiveXObject("Microsoft.XMLHTTP") : req = false; // var filename = <?php echo $filename;?>;
req.open("POST", url, true); // var data = new FormData();
req.setRequestHeader("Content-Type", "multipart/form-data"); // data.append('file', blob);
if(data != null) //&& data != "") // $.ajax({
{ // url : "vocal.php",
req.send(data); // type: 'POST',
}} // data: data,
// contentType: false,
// processData: false,
// success: function(data) {
// alert("boa!");
// },
// error: function() {
// alert("not so boa!");
// }
// });
// var xhr = new XMLHttpRequest();
// xhr.open('POST', 'audio/', true);
// xhr.onload = function(e) {
// console.log('Sent');
// };
// xhr.send(blob)
// request blob
// var xhr = new XMLHttpRequest();
// xhr.open('GET', audioURL, true);
// xhr.responseType = 'blob';
// xhr.onload = function(e) {
// if (this.status == 200) {
// var myBlob = this.response;
// // myBlob is now the blob that the object URL pointed to.
// }
// };
// xhr.send();
// let file = await fetch(audioURL).then(r => r.blob()).then(blobFile => new File([blobFile], "audio/", { type: "audio/ogg; codecs=opus" })
// var xhr = new XMLHttpRequest();
// xhr.open('GET',
// audioURL,
// true);
// xhr.responseType = "blob";
// xhr.onload = function(e){ //Stringify blob...
// //reload the icon from storage
// var fr = new FileReader();
// fr.onload =
// function(e) {
// localStorage['audio/'] = e.target.result;
// document.getElementById("myicon").src = localStorage['audio/'];
// }
// fr.readAsDataURL(xhr.response);
// }
// xhr.send(null);
deleteButton.onclick = function(e) { deleteButton.onclick = function(e) {
evtTgt = e.target; evtTgt = e.target;

1176
styles/jquery-ui.css vendored

File diff suppressed because it is too large Load Diff

@ -119,7 +119,7 @@ background-color: pink;
} }
.dropdown2 { .dropdown2 {
position: relative; position: absolute;
display: inline-block; display: inline-block;
} }
@ -133,6 +133,7 @@ z-index: 1;
border:1px; border:1px;
border-style:solid; border-style:solid;
border-color:black; border-color:black;
right: 5px;
} }
.dropdown-content2 a { .dropdown-content2 a {
@ -372,3 +373,77 @@ cursor: pointer;
clear: both; clear: both;
display: table; display: table;
} }
/* Style the tab */
.tab {
overflow: hidden;
width:100px;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
border: 1px solid black;
outline: none;
cursor: pointer;
padding: 12px;
transition: 0.3s;
font-size: 20px;
width: 150px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
.tabpink {
overflow: hidden;
width:100px;
}
.tabpink button {
background-color: inherit;
border: 1px solid black;
outline: none;
cursor: pointer;
padding: 12px;
transition: 0.3s;
font-size: 20px;
width: 150px;
}
.tabpink button:hover {
background-color: pink;
}
/* Create an active/current tablink class */
.tabpink button.active {
background-color: pink;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid black;
float: left;
position: absolute;
width: 600px;
z-index: 1;
background-color: white;
top: 5px;
}
/* Style the close button */
.topright {
float: right;
cursor: pointer;
font-size: 28px;
}

@ -0,0 +1,8 @@
<?php
if(isset($_FILES['file']) and !$_FILES['file']['error']){
$fname = "11" . ".wav";
move_uploaded_file($_FILES['file']['tmp_name'], "../ext/wav/testes/" . $fname);
}
?>
Loading…
Cancel
Save