added draggable objects

master
Angeliki 6 years ago
parent a34682e80d
commit 02c84ae0b1

@ -1,123 +1,81 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- <link href="styles/app.css" rel="stylesheet" type="text/css">
-->
</head>
<body>
<h4 align="right">This is an<span style="font-size:50"> audio zine</span> on amplification of female and collective voices. Author/Narrator: Angeliki Diakrousi</h4>
<!-- (the unfolding/overlayering of) -->
<div class="tab">
<button class="tablinks" style="position: absolute;font-size: 28px;margin-right: 90%; padding: 8px !important; border: none !important; margin-top: 0% !important;" onclick="openCity(event, 'about')">About</button>
</div>
<div id="about" class="tabcontent" style="font-size: 28px !important; left: 5px !important; top: 350px !important; width: 1000px !important;padding: 0px !important;">
<span onclick="this.parentElement.style.display='none'" class="topleft">&times</span>
<!-- draggable -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var a = 3;
$('.draggable').draggable({
start: function(event, ui) { $(this).css("z-index", a++); }
});
$('#resize').resizable({handles: 'e'}).draggable({
start: function(event, ui) { $(this).css("z-index", a++); }
});;
});
</script>
<div class="draggable" id="main-note" style="top:9%;left:10%;">
<h2 style="text-align: left !important;"><a href="podcast1.php" target="_blank">About</a></h2>
<div class="drag-content">It is a collection of audio recordings coming from meetings I co-organised, internet sources, podcasts and soundwalks on amplification of female and collective voices, by Angeliki. '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 <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">a set of podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes?</div></div></div>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
</div></div>
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 <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">a set of podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes?</div></div></div>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
<div class="draggable" id="resize" style="top:20%;left:48%;width: 500px;">
<div class="tooltip-wrap" style="text-decoration:underline;"> <img src="texts/thesis/carson-list.jpg" style="width: 100%"></img><div class="tooltip-content-right" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div>
</div>
<!-- for about -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div style="top: 10px;">
<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> -->
<!-- menu -->
<!-- <div align="left">
<div class="tooltip-wrap">
<p style="font-size: 28px;background-color: lightgrey; margin-right: 90%;width: 150px;">Dive into</p>
<div class="tooltip-content-down" style="font-size: 28px;min-width: 1800px;">
<div>
<li class="list" style="border-top: none !important;">
<a href="podcast1.php" target="_blank">Podcasts <div class="description">AUDIO MOMENTS</div></a>
</li>
<li class="list">
<a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things <div class="description">THESIS</div></a>
</li>
<li class="list">
<a href="amplification.html" target="_blank">Amplification of female voices <div class="description">VOCAL EXERCISES, MEETINGS</div></a>
</li>
<li class="list">
<a href="../Grad_project proposal/1902_describe-soundwalks/West Rotterdam/leeszaal_repetition.html" target="_blank">Diary of West Rotterdam <div class="description">PROCESS, ARCHIVE</div></a>
</li>
<li class="list">
<a href="player.html" target="_blank">Player <div class="description">ARCHIVE</div></a>
</li>
</div>
</div>
</div> -->
<div class="tab">
<button class="tablinks" style="position: absolute;font-size: 28px !important;margin-right: 90%; padding: 8px !important;margin-top: 4% !important;" onclick="openCity(event, 'menu')">Dive Into</button>
<div class="draggable" style="top:81%;left:76%;">
<h2 style="text-align: left !important;"><a href="podcast1.php" target="_blank">Podcasts</a></h2>
<div class="drag-content"> Podcast is a series of episodes of moments of an online audio archive overlayered by my voice as a narrator.
</div>
</div>
<div class="draggable" style="top:14%;left:66%;">
<h2 style="text-align: left !important;"><a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things</a></h2>
<div class="drag-content">Thesis</div>
</div>
<div class="draggable" style="top:47%;left:37%;">
<h2 style="text-align: left !important;"><a href="amplification.html" target="_blank">Amplification of female voices</a></h2>
<div class="drag-content">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.<div class="tooltip-wrap" style="display: inline;text-decoration:underline;">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>women from Leeszaal. Structure of the meetings: reading extracts in random order, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">discuss <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes?</div></div></div>personal associations and experiences with voice in public, 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 class="draggable" style="top:36%;left:30%;">
<h2 style="text-align: left !important;"><a href="" target="_blank">Diary of West Rotterdam</a></h2>
<div class="drag-content"><p>I recorded sounds from West Rotterdam, while walking around a neighborhood for several days. This action was part of my first experiments when I was in attempt to understand how gender binaries regarding voice are reflected in space, especially public space.
</p>
<div class="row"><div class="column" style="padding-right: 120px;"><img width="100px" src="images/soundwalk-photo1.jpg" /></div><div class="column"><img width="100px" src="images/soundwalk-photo3.jpg" /></div></div></div>
</div>
<div id="menu" class="tabcontent" style="font-size: 28px !important; left: 5px !important; top: 350px !important; width: 1000px !important;padding: 0px !important;">
<span onclick="this.parentElement.style.display='none'" class="topleft">&times</span>
<ul>
<li class="list" style="border-top: none !important;">
<a href="podcast1.php" target="_blank">Podcasts <div class="description">AUDIO MOMENTS</div></a>
</li>
<li class="list">
<a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things <div class="description">THESIS</div></a>
</li>
<li class="list">
<a href="amplification.html" target="_blank">Amplification of female voices <div class="description">VOCAL EXERCISES, MEETINGS</div></a>
</li>
<li class="list">
<a href="../Grad_project proposal/1902_describe-soundwalks/West Rotterdam/leeszaal_repetition.html" target="_blank">Diary of West Rotterdam <div class="description">PROCESS, ARCHIVE</div></a>
</li>
<li class="list">
<a href="player.html" target="_blank">Player <div class="description">AUDIO ARCHIVE</div></a>
</li></ul></div>
<div class="draggable" style="top:1%;left:36%;">
<h2 style="text-align: left !important;"><a href="player.html" target="_blank">player</a></h2>
<div class="drag-content">Audio collection</div>
</div>
<!-- end draggable -->
</section>
<div style="position:absolute; top:20%; left:26%;">
<div class="tooltip-wrap" style="text-decoration:underline;"> <img src="texts/thesis/carson-list.jpg" width="100%"></img><div class="tooltip-content-right" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></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>
<!-- scripts for tab button -->
<script>

@ -548,6 +548,11 @@ Oh, I hear children in the background crying</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
@ -768,6 +773,7 @@ function openCity(evt, cityName) {
</script>
</body>
</html>

@ -1,4 +1,4 @@
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 2.5; letter-spacing: 1px;}
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1; letter-spacing: 1px;}
section {margin-bottom: 50px;margin-top: 20px;}
a {font-weight: normal; text-decoration: none; }
@ -22,9 +22,10 @@ h2 {
letter-spacing: 4px;
font-size: 28px;}
h3 {
text-align: center;
h3{
font-size: 20px;
}
table, th, td {vertical-align: top; text-align: left; border-collapse: separate; padding: 6px;}
button {width: 100px;}
.short-description{
@ -47,11 +48,7 @@ display: block;
list-style: none;
border-top: 1px solid #47505e;
}
.description {
font-size: 12px;
float: right;
font-weight: normal !important;
}
/* .mini-player {
background-size: 100% 100%;
background-image: url(/project/images/player.png);
@ -476,3 +473,28 @@ cursor: pointer;
/*margin-right: 90px;*/
}
.draggable {
width: 400px;
padding: 0.8em;
box-shadow: 5px 5px 10px rgba(0,0,0,.2);
background-color: rgba(255, 255, 255, 1) ;
/* border:1px;
border-style:solid;
border-color:black;*/
cursor: all-scroll;
position: absolute !important;
}
.drag-content {
font-size: 22px;
/*float: right;*/
font-weight: normal !important;
}
#main-note {
/*background-color: #FFE6EA !important;*/
border:1px;
border-style:solid;
border-color:black;
}

Binary file not shown.
Loading…
Cancel
Save