Handler minwidth

This commit is contained in:
2018-09-10 17:08:45 +02:00
parent 3a0c3431e7
commit 8913001708
2 changed files with 84 additions and 63 deletions
+84 -62
View File
@@ -1,8 +1,3 @@
function wrap(){
$('#start > div:nth-child(-n+3)').wrapAll('<div class="top"></div> ')
$('#start > div:nth-child(n+2)').wrapAll('<div class="bottom"></div> ')
};
function scrollbar(){
$(window).on("load",function(){
$("#start > div > div").mCustomScrollbar({
@@ -28,13 +23,18 @@ function drag() {
$hand1.draggable({
containment: "#start",
scroll: false,
// grid: [ 5, 5 ],
drag: function(){
drag: function(event, ui){
var dragDistanceW = 300;
ui.position.left = Math.min( ui.position.left, ui.helper.next().offset().left + ui.helper.next().width()-dragDistanceW);
ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistanceW);
// handler
// dimension handler
var $Hhand = $(this).outerHeight();
var $Whand = $(this).outerWidth();
// ajust handler
var $Whand = $(this).outerWidth(true);
var $Hhand = $(this).outerHeight(true);
// center handler
var ajustH = $Hhand / 2;
var ajustW = $Whand / 2;
@@ -43,84 +43,96 @@ function drag() {
var xPos = offset.left + ajustW;
var yPos = offset.top - ajustH;
var xPos2 = xPos + (ajustW * 2);
var yPos2 = yPos + (ajustH * 2);
var xPos2 = xPos + $Whand;
var yPos2 = yPos + $Hhand;
// Blocs
// top
var $recits = $(this).parent('#page').find('#recits');
var $itw = $(this).parent('#page').find("#interviews");
var $img = $(this).parent('#page').find("#images");
// bottom
var $bottom = $(this).parent('#page').find(".bottom");
var $links = $(this).parent('#page').find("#links");
var $rs = $(this).parent('#page').find("#reseaux-sociaux");
var $stmp = $(this).parent('#page').find("#streetmap");
var $rs = $(this).parent('#page').find("#reseaux-sociaux");
var $links = $(this).parent('#page').find("#links");
//handler2
var $handler2 = $(this).parent().find('.hand2');
// dimension blocs
var Dw0 = $(window).outerWidth(true);
var Dw1 = $recits.outerWidth(true);
var Dw2 = $itw.outerWidth(true);
var Dw3 = $img.outerWidth(true);
//windows
var Dw0 = $(window).outerWidth(true);
// var Bw1 = (Dw0 - (Dw2 + Dw3));
//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
var $handler2 = $(this).parent().find('.hand2');
$handler2.css({
"top": yPos + 25,
"left": xPos + Bw2 - 25,
});
$recits.css({
"width": xPos,
"width":xPos,
"height": yPos - 2,
});
$itw.css({
"left":xPos,
"width": Bw2,
"height": yPos - 2,
});
$img.css({
"width": Dw3,
"height": yPos - 2,
});
$bottom.css({
"top": yPos2 + 2,
});
$stmp.css({
"width": xPos,
"top": yPos2 + 2,
"width":xPos,
"top": yPos2,
"bottom":0,
"height": 'auto',
});
$rs.css({
"width": Bw2,
"top": yPos2,
"left":xPos,
"width":Bw2,
"bottom":0,
"height": 'auto',
});
$links.css({
"width": Dw3,
"top": yPos2,
"bottom":0,
"height": 'auto',
});
}
});
$hand2.draggable({
containment: "#start",
scroll: false,
drag: function(){
drag: function(event, ui){
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);
// handler
// dimension handler
var $Hhand = $(this).outerHeight(true);
var $Whand = $(this).outerWidth(true);
// ajust handler
var $Hhand = $(this).outerHeight(true);
// center handler
var ajustH = $Hhand / 2;
var ajustW = $Whand / 2;
@@ -129,43 +141,45 @@ function drag() {
var xPos = offset.left + ajustW;
var yPos = offset.top - ajustH;
var xPos2 = xPos + (ajustW * 2);
var yPos2 = yPos + (ajustH * 2);
var xPos2 = xPos + $Whand;
var yPos2 = yPos + $Hhand;
// Blocs
// top
var $recits = $(this).parent('#page').find('#recits');
var $itw = $(this).parent('#page').find("#interviews");
var $img = $(this).parent('#page').find("#images");
// bottom
var $bottom = $(this).parent('#page').find(".bottom");
var $links = $(this).parent('#page').find("#links");
var $rs = $(this).parent('#page').find("#reseaux-sociaux");
var $stmp = $(this).parent('#page').find("#streetmap");
var $rs = $(this).parent('#page').find("#reseaux-sociaux");
var $links = $(this).parent('#page').find("#links");
//handler1
var $handler1 = $(this).parent().find('.hand1');
// dimension blocs
var Dw0 = $(window).outerWidth(true);
var Dw1 = $recits.outerWidth(true);
var Dw2 = $itw.outerWidth(true);
var Dw3 = $img.outerWidth(true);
//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 Bw1 = (Dw0 - (Dw2 + Dw3));
var Bw2 = (Dw0 - (Dw1 + Dw3));
var Bw3 = (Dw0 - (Dw1 + Dw2));
var Bl3 = Dw1 + Dw2;
// app dimension
var $handler1 = $(this).parent().find('.hand1');
$handler1.css({
"top": yPos + 25,
"left": xPos - Bw2 - 25,
});
$recits.css({
// "width": xPos,
"height": yPos - 2,
});
@@ -179,17 +193,26 @@ function drag() {
"height": yPos - 2,
});
$bottom.css({
"top": yPos2 + 2,
$stmp.css({
"top": yPos2,
"bottom":0,
"height": 'auto',
});
$rs.css({
"width": Bw2,
"top": yPos2,
"bottom":0,
"height": 'auto',
});
$links.css({
"width": xPos3,
"top": yPos2,
"bottom":0,
"height": 'auto',
});
}
});
};
@@ -224,10 +247,9 @@ function map() {
}
$(document).ready(function() {
// wrap();
clickhand();
map();
drag();
// dragcanvas();
// clickhand();
// drag();
// scrollbar();
});
@@ -23,7 +23,6 @@ p{
}
}
.blocs{
&:nth-child(1){
color: white;