some unsuccessful attempts to fix scale of draggable objects

master
Angeliki 6 years ago
parent ce666f0cdd
commit e22fa13066

@ -27,14 +27,14 @@
<!-- draggable -->
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:9%;left:6%;">
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:9%;left:6%;" >
<h2 ><a href="index.php" target="_blank">About</a></h2>
<div class="drag-content">
'Let's amplify unspeakable things' is an online platform that supports a space for exploration and research, regarding voice in public and its amplification, developed by Angeliki Diakrousi. It consists of a set of experiments that 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 an archive of audio recordings produced in situated meetings and soundwalks. Every podcast exists on a way that creates repetetive layers of the same material. I perceive amplification as a way to create presence through repetition and multiplication. 'Let's amplify unspeakable things' is upsetting binaries such as male/female, expert/amateur, rational/irrational. It is about creating poetic (audio) narratives emerging from the contribution of people.
</div></div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:12%;left:55%;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 class="tooltip-wrap" style="text-decoration:underline;"> <img src="images/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>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 4px; right: 1500px;z-index: 1;">

@ -14,8 +14,7 @@ $(document).ready(function() {
var $wrapper = $(".scaleable-wrapper");
$wrapper.each(function (d) {
var $this = $(this);
// var $el = $("#very-specific-design");
var elHeight = $this.outerHeight();
// var elHeight = $this.outerHeight();
var elWidth = $this.outerWidth();
$this.resizable({
@ -27,22 +26,24 @@ $(document).ready(function() {
var scale, origin;
scale = Math.min(
ui.size.width / elWidth,
ui.size.height / elHeight
// ui.size.height / elHeight,
ui.size.width / elWidth
);
// scale=1.0;
// scale=2*scale
$this.css({
transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
// transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
transform: "translate(0%, 0%) " + "scale(" + scale + ")"
});
}
var starterData = {
size: {
width: $this.width(),
height: $this.height()
// height: $this.height(),
width: $this.width()
}
}
// console.log("starterData", starterData, this);

@ -1,7 +1,7 @@
body {
background: #F6F5F5;
font-family: "Old Standard TT";
font-size: 1rem;
font-size: 1.2rem;
line-height: 1.3;
letter-spacing: 1px;
padding: 20px;
@ -515,6 +515,7 @@ input[type=checkbox]:checked ~ aside {
position: absolute !important;
width: 400px;
display: inline;
/* transform: scale(20);*/
}
#img {
@ -525,7 +526,7 @@ input[type=checkbox]:checked ~ aside {
/*float: right;*/
font-weight: normal !important;
padding: 0.8em;
font-size: 1rem;
/*font-size: 20px;*/
}
.scaleable-wrapper {

@ -46,28 +46,28 @@
<!-- draggable menu-->
<div class="draggable" style="top: 200px; right: 15px;">
<h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2>
<h2><a href="../../amplification.html" target="_blank">Amplification of female voices</a></h2>
</div>
<div class="draggable" style="top: 600px; right: 25px;">
<h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2>
</div>
<div class="draggable" style="top: 300px; right: 5px;">
<h2 ><a href="player.html" target="_blank">Player</a></h2>
<h2 ><a href="../../player.html" target="_blank">Player</a></h2>
</div>
<div class="draggable" style="top: 800px; right: 400px;">
<h2 ><a href="podcast1.php" target="_blank">About</a></h2>
<h2 ><a href="../../podcast1.php" target="_blank">About</a></h2>
</div>
<div class="draggable" style="top: 20px; right: 250px;">
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2>
<h2 ><a href="../../podcast1.php" target="_blank">Podcasts</a></h2>
</div>
<!-- end draggable -->
<!-- draggable images -->
<div class="draggable" style="top: 1713px;left: 147px;"><div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="carson-list.jpg"><img src="carson-list.jpg" width="800px"></a><div class="tooltip-content-right"><div>Figure 1: Describing how female voices sound like
<div class="draggable" style="top: 1713px;left: 147px;"><div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="../../images/carson-list.jpg"><img src="../../images/carson-list.jpg" width="800px"></a><div class="tooltip-content-right"><div>Figure 1: Describing how female voices sound like
</div></div></div></div>

Loading…
Cancel
Save