function scrollbar(){ $(window).on("load",function(){ $("#start > div > div").mCustomScrollbar({ axis:"y", setTop: 0, }); }); } function clickhand(){ $(".handler").on("mousedown", function (e) { e.preventDefault(); $(this).addClass("mouseDown"); }).on("mouseup", function () { $(this).removeClass("mouseDown"); }); }; function drag() { var $hand = $( ".handler" ); var $hand1 = $( ".hand1" ); var $hand2 = $( ".hand2" ); var p = 100; //marge var mrg = 1; // Blocs // find var $recits = $hand.parents('#page').find('#recits'); var $itw = $hand.parents('#page').find("#interviews"); var $img = $hand.parents('#page').find("#images"); var $stmp = $hand.parents('#page').find("#streetmap"); var $rs = $hand.parents('#page').find("#reseaux-sociaux"); var $links = $hand.parents('#page').find("#links"); // handler // dimension var $Whand = parseFloat($hand.outerWidth(true)); var $Hhand = parseFloat($hand.outerHeight(true)); $hand1.draggable({ containment: "#start", scroll: false, drag: function(event, ui){ var oW = parseFloat($("#start").outerWidth(true)); var oH = parseFloat($("#start").outerHeight(true)); var ajustH = (100 * ( 25/ oH )) + "%"; var stophand = (0.8 * oW) - 130; ui.position.left = Math.max( 200, ui.position.left ); ui.position.left = Math.min( stophand, ui.position.left ); // handler // position var pos = $hand1.position(); var pos1 = $hand2.position(); var pos11 = parseFloat(pos1.left) + 25; // center handler var ajustW = $Whand / 2; var ajustH = $Hhand / 2; // position XY var xPos = ( p * parseFloat( ((ui.position.left)) / oW) ) + "%" ; var yPos = ( p * parseFloat( ((ui.position.top)) / oH ) ) + "%" ; var xPos2 = ( p * parseFloat( ((ui.position.left ) ) / oW) ) + "%"; var yPos2 = ( p * parseFloat( ((ui.position.top ) ) / oH) ) + "%" ; var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW) ) + "%"; var yPos3 = ( p * parseFloat( (ui.position.top ) / oH) ) + "%" ; //handler2 var $handler2 = $(this).parent().find('.hand2'); var PosHand = ( parseFloat(p * parseFloat((pos11 - 25) / oW)) - parseFloat(p * parseFloat( (ui.position.left) / oW)) ) + "%"; // application dimension $hand2.css({ 'top': yPos3, }) $recits.css({ "width": xPos, "height": yPos, "left": "-2px", }) $itw.css({ "left":xPos2, "width": PosHand, "height": yPos, "min-width": "200px" }) $img.css({ "height": yPos, "min-width": "200px", }) $stmp.css({ "width":xPos, "top": yPos2, "bottom":"1px", "height": 'auto', }) $rs.css({ "top": yPos2, "left":xPos2, "width":PosHand, "bottom":"1px", "height": 'auto', }) $links.css({ "top": yPos2, "bottom":0, "height": 'auto', }) // if itw < 200 var testPourcent = parseFloat( p * parseFloat(ui.position.left + 238) / oW ) + "%"; var img200 = parseFloat( p * parseFloat( (oW - (pos11 - 25 )) / oW) ) + "%" ; if ( $itw.width() < 200) { $img.css({ "width": img200, }) $links.css({ "width": img200, }) $hand2.css({ 'left':testPourcent, }) } else {} }, stop: function( event, ui ) { var parent = $(this).parents('#start'); $(this).css({ left:parseInt($(this).css('left'))/parent.width()*100+"%", top: parseInt($(this).css('top'))/parent.height()*100+"%", }); }, }); $hand2.draggable({ containment: "#start", scroll: false, drag: function(event, ui){ var oW = parseFloat($("#start").outerWidth(true)); var oH = parseFloat($("#start").outerHeight(true)); var stophand = (oW - 200) - 50; console.log(stophand) ui.position.left = Math.max( 400, ui.position.left ); ui.position.left = Math.min( stophand, ui.position.left ); // handler // position var pos = $hand1.position(); var pos1 = $hand2.position(); var pos11 = parseFloat(pos.left) + 25; // center var ajustW = $Whand / 2 - 1; var ajustH = $Hhand / 2 + 1; var ajustW200 = $Whand / 2 + 6; 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( ( oW - (ui.position.left) ) / oW) + "%" ); var yPos = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ; var xPos2 = ( p * parseFloat( ( oW - (ui.position.left) ) / oW ) ) + "%"; var yPos2 = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ; // var xPos3 = ( p * parseFloat( (oW - (pos.left)) / oW ) ) + "%"; var xPos3 = ( p * parseFloat( (pos1.left + ajustW) / oW) ) + "%"; var yPos3 = ( p * parseFloat( (ui.position.top ) / oH ) ) + "%" ; //handler2 var $handler2 = $(this).parent().find('.hand2'); var PosHand = (parseFloat(xPos3) - parseFloat(xPos)) + "%"; var PosHand1 = ( parseFloat(p * parseFloat( (ui.position.left) / oW)) - parseFloat(p * parseFloat((pos11 - 25) / oW))) + "%"; // application dimension $hand1.css({ 'top': yPos3, }) $recits.css({ "height": yPos, }) $itw.css({ "width": PosHand1, "height": yPos, }) $img.css({ "width": xPos, "height": yPos, }) $stmp.css({ "top": yPos2, "bottom":"1px", "height": 'auto', }) $rs.css({ "top": yPos2, "width":PosHand1, "bottom":"1px", "height": 'auto', }) $links.css({ "width":xPos, "top": yPos2, "bottom":0, "height": 'auto', }) // if itw < 200 var test = ui.position.left - 200; var testPourcent = ( p * parseFloat(test) / oW ) + "%"; var img200 = ( p * parseFloat( ((pos.left) ) / oW) + "%" ); if ( $itw.width() < 200) { $recits.css({ "width": img200, }) $stmp.css({ "width": img200, }) $itw.css({ "left": img200, }) $rs.css({ "left": img200, }) $hand1.css({ 'left':test, }) }else { } }, stop: function( event, ui ) { var parent = $(this).parents("#start"); $(this).css({ left:parseInt($(this).css('left'))/parent.width()*100+"%", top: parseInt($(this).css('top'))/parent.height()*100+"%", }); }, }); }; function dragcanvas() { var $links = $('#links canvas'); var $reseau = $('#reseaux-sociaux svg') $links.draggable({ // containment:"#start", scroll: false }); $reseau.draggable({ scroll: false }); } $(document).ready(function() { clickhand(); drag(); dragcanvas(); // scrollbar(); });