blocks responsive + marge ok
This commit is contained in:
+86
-103
@@ -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;
|
||||
|
||||
// position handler
|
||||
var offset = $(this).offset();
|
||||
var xPos = offset.left + ajustW;
|
||||
var yPos = offset.top - ajustH;
|
||||
var ajustW2 = $Whand / 2 + 1;
|
||||
var ajustH2 = $Hhand / 2 + 1;
|
||||
|
||||
var xPos2 = xPos + $Whand;
|
||||
var yPos2 = yPos + $Hhand;
|
||||
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 = ( 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');
|
||||
var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%";
|
||||
|
||||
// dimension blocs
|
||||
//windows
|
||||
var Dw0 = $(window).outerWidth(true);
|
||||
// application dimension
|
||||
$(this).css({
|
||||
'left': xPos,
|
||||
'top': yPos
|
||||
})
|
||||
|
||||
//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,
|
||||
//
|
||||
// });
|
||||
$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() {
|
||||
|
||||
Reference in New Issue
Block a user