some unsuccessful attempts to fix scale of draggable objects

index.php

@@ -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;">

js/main.js

@@ -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);

styles/stylesheet.css

@@ -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 {

texts/thesis/thesis-angeliki.html

@@ -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>