blocks responsive + marge ok

user/themes/r2c/js/script.js

@@ -42,7 +42,6 @@ function drag() {
 
       // handler
         // position
-
         var pos = $hand1.position();
         var pos1 = $hand2.position();
         // dimension
@@ -50,18 +49,24 @@ function drag() {
         var $Hhand = $(this).outerHeight(true);
 
         // center
-        var ajustW = $Whand / 2;
-        var ajustH = $Hhand / 2;
+        var ajustW = $Whand / 2 - 1;
+        var ajustH = $Hhand / 2 + 1;
+
+        var ajustW2 = $Whand / 2 + 1;
+        var ajustH2 = $Hhand / 2 + 1;
+
+        var ajustW3 = $Whand / 2 - 3;
+        var ajustH3 = $Hhand / 2 + 1;
 
         // position XY
-        var xPos = ( p * parseFloat( (pos.left + ajustW ) / oW ) ) + "%";
+        var xPos = ( p * parseFloat( (pos.left + ajustW ) / oW)+ "%" );
         var yPos = ( p * parseFloat( (pos.top - ajustH ) / oH ) ) + "%" ;
 
-        var xPos2 = ( p * parseFloat( (pos.left + ajustW ) / oW ) ) + "%";
+        var xPos2 = ( p * parseFloat( (pos.left + ajustW2 ) / oW ) ) + "%";
         var yPos2 = ( p * parseFloat( (pos.top + ajustH ) / oH ) ) + "%" ;
 
-        var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW ) ) + "%";
-        var yPos3 = ( p * parseFloat( (pos1.top + ajustH ) / oH ) ) + "%" ;
+        var xPos3 = ( p * parseFloat( (pos1.left + ajustW3) / oW ) ) + "%";
+        var yPos3 = ( p * parseFloat( (pos.top ) / oH ) ) + "%" ;
 
         //handler2
         var $handler2 = $(this).parent().find('.hand2');
@@ -75,34 +80,7 @@ function drag() {
         var $rs = $(this).parent('#page').find("#reseaux-sociaux");
         var $links = $(this).parent('#page').find("#links");
 
-        // dimension en px
-        var $Dr = $recits.outerWidth(true);
-        var $Di = $itw.outerWidth(true);
-        var $Dimg =  $img.outerWidth(true);
-        var $Dstr = $stmp.outerWidth(true);
-        var $Drs = $rs.outerWidth(true);
-        var $Dlinks = $links.outerWidth(true);
-
-        // dimension blocs en %
-          //windows
-          var DoW = ( p * (oW / oW ) ) + "%" ;
-          var DoH = ( p * (oH / oH ) ) + "%" ;
-
-          //blocs
-            // recit
-            var DrW = ( p * parseFloat( ($Dr) / oW ) ) + "%" ;
-            // interviews
-            var DitwW = ( p * parseFloat( ($Di) / oW ) ) + "%" ;
-            // images
-            var DimgW = ( p * parseFloat( ($Dimg) / oW ) ) + "%" ;
-            // street
-            var DstmpW = ( p * parseFloat( ($Dstr) / oW ) ) + "%" ;
-            // reaseaux
-            var DrsW = ( p * parseFloat( ($Drs) / oW ) ) + "%" ;
-            // links
-            var DlinksW = ( p * parseFloat( ($Dlinks) / oW ) ) + "%" ;
-
-            var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
+        var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
 
         // application dimension
         $(this).css({
@@ -111,45 +89,44 @@ function drag() {
         })
 
         $hand2.css({
-          'top': yPos,
+          'top': yPos3,
         })
 
         $recits.css({
           "width": xPos,
           "height": yPos,
-        });
+        })
 
         $itw.css({
-          "left":xPos,
+          "left":xPos2,
           "width": PosHand,
           "height": yPos,
-        });
+        })
 
         $img.css({
           "height": yPos,
-        });
+        })
 
         $stmp.css({
           "width":xPos,
           "top": yPos2,
-          "bottom":0,
+          "bottom":"1px",
           "height": 'auto',
-        });
+        })
 
         $rs.css({
           "top": yPos2,
-          "left":xPos,
+          "left":xPos2,
           "width":PosHand,
-          "bottom":0,
+          "bottom":"1px",
           "height": 'auto',
-        });
+          })
 
         $links.css({
           "top": yPos2,
           "bottom":0,
           "height": 'auto',
-        });
-
+        })
     }
   });
 
@@ -158,30 +135,53 @@ function drag() {
     scroll: false,
 
     drag: function(event, ui){
-      var dragDistance = 300;
+      // var dragDistance = 300;
+      // ui.position.left = Math.min( ui.position.left,  ui.helper.next().offset().left + ui.helper.next().width() - dragDistance);
+      // ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
+      //
+      // // ui.position.top = Math.max( ui.position.top, ui.helper.prev().offset().top + ui.helper.prev().outerHeight() - dragDistance);
+      // ui.position.top = Math.max(ui.position.top, ui.helper.prev().offset().top + dragDistance);
 
-      ui.position.left = Math.min( ui.position.left,  ui.helper.next().offset().left + ui.helper.next().width()-dragDistance);
-      ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
+      // General
+        // origine
+        var oW = parseFloat($(window).outerWidth(true));
+        var oH = parseFloat($(window).outerHeight(true));
+        // pourcent
+        var p = 100;
 
-      ui.position.top = Math.max(ui.position.top, ui.helper.next().offset().top + dragDistance);
       // handler
-        // dimension handler
+        // position
+        var pos = $hand1.position();
+        var pos1 = $hand2.position();
+        // dimension
         var $Whand = $(this).outerWidth(true);
         var $Hhand = $(this).outerHeight(true);
 
-        // center handler
-        var ajustH = $Hhand / 2;
-        var ajustW = $Whand / 2;
+        // center
+        var ajustW = $Whand / 2 - 1;
+        var ajustH = $Hhand / 2 + 1;
+
+        var ajustW2 = $Whand / 2 + 1;
+        var ajustH2 = $Hhand / 2 + 1;
 
-        // position handler
-        var offset = $(this).offset();
-        var xPos = offset.left + ajustW;
-        var yPos = offset.top - ajustH;
+        var ajustW3 = $Whand / 2 + 3;
+        var ajustH3 = $Hhand / 2 + 1;
+
+        // position XY
+        var xPos = ( p * parseFloat( ( oW - (pos1.left + ajustW) ) / oW) + "%" );
+        var yPos = ( p * parseFloat( (pos1.top - ajustH ) / oH ) ) + "%" ;
 
-        var xPos2 = xPos + $Whand;
-        var yPos2 = yPos + $Hhand;
+        var xPos2 = ( p * parseFloat( ( oW - (pos1.left + ajustW2) ) / oW ) ) + "%";
+        var yPos2 = ( p * parseFloat( (pos1.top + ajustH ) / oH ) ) + "%" ;
+
+        var xPos3 = ( p * parseFloat( (oW - (pos.left + ajustW3)) / oW ) ) + "%";
+        var yPos3 = ( p * parseFloat( (pos1.top ) / oH ) ) + "%" ;
+
+        //handler2
+        var $handler2 = $(this).parent().find('.hand2');
 
       // Blocs
+        // find
         var $recits = $(this).parent('#page').find('#recits');
         var $itw = $(this).parent('#page').find("#interviews");
         var $img = $(this).parent('#page').find("#images");
@@ -189,70 +189,53 @@ function drag() {
         var $rs = $(this).parent('#page').find("#reseaux-sociaux");
         var $links = $(this).parent('#page').find("#links");
 
-      //handler1
-      var $handler1 = $(this).parent().find('.hand1');
-
-        // dimension blocs
-          //windows
-          var Dw0 = $(window).outerWidth(true);
-
-          //blocs
-          var Dw1 = $recits.outerWidth(true);
-          var Dw2 = $itw.outerWidth(true);
-          var Dw3 = $img.outerWidth(true);
-          var Dw4 = $links.outerWidth(true);
-          var Dw5 = $rs.outerWidth(true);
-          var Dw6 = $stmp.outerWidth(true);
-
-        var xPos3 = Dw0 - xPos;
-        var Bw2 = (Dw0 - (Dw1 + Dw3));
-        var Bw3 = (Dw0 - (Dw1 + Dw2));
-        var Bl3 = Dw1 + Dw2;
-
-        // app dimension
-        //
-        // $handler1.css({
-        //   "top": yPos + 25,
-        //
-        // });
+        var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
+
+        // application dimension
+        $(this).css({
+          'left': xPos,
+          'top': yPos
+        })
+
+        $hand1.css({
+          'top': yPos3,
+        })
 
         $recits.css({
-          "height": yPos - 2,
-        });
+          "height": yPos,
+        })
 
         $itw.css({
-          "width": Bw2,
-          "height": yPos - 2,
-        });
+          "width": PosHand,
+          "height": yPos,
+        })
 
         $img.css({
-          "width": xPos3,
-          "height": yPos - 2,
-        });
+          "width": xPos,
+          "height": yPos,
+        })
 
         $stmp.css({
           "top": yPos2,
-          "bottom":0,
+          "bottom":"1px",
           "height": 'auto',
-        });
+        })
 
         $rs.css({
-          "width": Bw2,
           "top": yPos2,
-          "bottom":0,
+          "width":PosHand,
+          "bottom":"1px",
           "height": 'auto',
-        });
+          })
 
         $links.css({
-          "width": xPos3,
+          "width":xPos,
           "top": yPos2,
           "bottom":0,
           "height": 'auto',
-        });
-
-
+        })
     }
-  });
+    });
 };
 
 function dragcanvas() {