<script>
jQuery(document).ready(function($) {
function genererPointilles($E1, $E2, $parent, zIndex) {
var borderWidth = 4;
if (typeof($parent)=='undefined')
var $parent = $('#ajax-content-wrap');
if (typeof(zIndex)=='undefined')
var zIndex = 10;
var topMargin = $parent.offset().top;
var leftMargin = $parent.offset().left;
var Ax = $E1.offset().left+$E1.width()/2-leftMargin;
var Ay = $E1.offset().top+$E1.height()-topMargin;
var Bx = $E2.offset().left+$E2.width()/2-leftMargin;
var By = $E2.offset().top-topMargin;
if (Bx<Ax)
var A2x = Ax+(Bx-Ax)/2;
else
var A2x = Ax-borderWidth/2;
var A2y = Ay;
var A2w = Math.abs((Ax-Bx)/2+borderWidth/2);
var A2h = Math.abs((By-Ay)/2+borderWidth/2);
if (Bx<Ax)
var B2x = Bx-borderWidth/2;
else
var B2x = Bx+(Ax-Bx)/2;
var B2y = Ay+(By-Ay)/2-borderWidth/2;
var B2w = A2w+borderWidth/2;
var B2h = A2h+borderWidth/2;
if (Math.abs(B2x-A2x)<5) {
A2x = A2x+(A2x-B2x)/2;
B2x = A2x;
}
if (Bx<Ax) {
var class1 = 'bottomright';
var class2 = 'topleft';
}
else {
var class1 = 'bottomleft';
var class2 = 'topright';
}
$parent.append('<div class="pointilles '+class1+'" style="left:'+A2x+'px;top:'+A2y+'px;width:'+A2w+'px;height:'+A2h+'px;z-index:'+zIndex+';"></div><div class="pointilles '+class2+'" style="left:'+B2x+'px;top:'+B2y+'px;width:'+B2w+'px;height:'+B2h+'px;z-index:'+zIndex+';"></div>');
}
function pointilles() {
$('.pointilles').remove();
genererPointilles($('.pointilles-bloc-1 .column-bg-overlay-wrap'), $('.pointilles-bloc-2'));
genererPointilles($('.pointilles-bloc-2'), $('.pointilles-bloc-3'), $('.pointilles-wrapper-1'), 1);
genererPointilles($('.pointilles-bloc-3'), $('.pointilles-bloc-4'), $('.pointilles-wrapper-2'), 1);
}
pointilles();
$(window).resize(pointilles);
});
</script>
<style>
.pointilles {
position: absolute;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pointilles.bottomright {
border-bottom: 4px dashed #FD7721;
border-right: 4px dashed #FD7721;
border-radius: 0 0 50px 0;
}
.pointilles.bottomleft {
border-bottom: 4px dashed #FD7721;
border-left: 4px dashed #FD7721;
border-radius: 0 0 0 50px;
}
.pointilles.topleft {
border-top: 4px dashed #FD7721;
border-left: 4px dashed #FD7721;
border-radius: 50px 0 0 0;
}
.pointilles.topright {
border-top: 4px dashed #FD7721;
border-right: 4px dashed #FD7721;
border-radius: 0 50px 0 0;
}
</style>
Comments