<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 = Math.round(Ax+(Bx-Ax)/2);
else
var A2x = Math.round(Ax-borderWidth/2);
var A2y = Ay;
var A2w = Math.round(Math.abs((Ax-Bx)/2+borderWidth/2));
var A2h = Math.round(Math.abs((By-Ay)/2+borderWidth/2));
if (Bx<Ax)
var B2x = Math.round(Bx-borderWidth/2);
else
var B2x = Math.round(Bx+(Ax-Bx)/2);
var B2y = Math.round(Ay+(By-Ay)/2-borderWidth/2);
var B2w = Math.round(A2w+borderWidth/2);
var B2h = Math.round(A2h+borderWidth/2);
if (Math.abs(B2x-A2x)<10) {
A2x = Math.round(A2x+(A2x-B2x)/2);
B2x = A2x;
}
if (B2x<A2x) {
var class1 = 'bottomright';
var class2 = 'topleft';
}
else if (B2x>A2x) {
var class1 = 'bottomleft';
var class2 = 'topright';
}
else {
var class1 = 'straight-1';
var class2 = 'straight-2';
}
$parent.append('<div class="pointilles '+class1+'" style="left:'+A2x+'px;top:'+A2y+'px;width:'+A2w+'px;height:'+A2h+'px;z-index:'+zIndex+';"><div class="line line-1"></div><div class="line line-2"></div></div><div class="pointilles '+class2+'" style="left:'+B2x+'px;top:'+B2y+'px;width:'+B2w+'px;height:'+B2h+'px;z-index:'+zIndex+';"><div class="line line-1"></div><div class="line line-2"></div></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;
overflow: hidden;
}
.pointilles.bottomright {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-corner-bottomright.png);
background-position: bottom right;
background-repeat: no-repeat;
}
.pointilles.bottomleft {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-corner-bottomleft.png);
background-position: bottom left;
background-repeat: no-repeat;
}
.pointilles.topright {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-corner-topright.png);
background-position: top right;
background-repeat: no-repeat;
}
.pointilles.topleft {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-corner-topleft.png);
background-position: top left;
background-repeat: no-repeat;
}
.pointilles.straight-1 {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
background-position: bottom left;
background-repeat: repeat-y;
width: 4px !important;
}
.pointilles.straight-2 {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
background-position: top left;
background-repeat: repeat-y;
width: 4px !important;
}
.pointilles.none {
display: none;
}
.pointilles .line {
position: absolute;
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.pointilles.straight-1 .line, .pointilles.straight-2 .line {
display: none;
}
.pointilles.bottomright .line-1 {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-horizontal.png);
background-position: bottom right;
background-repeat: repeat-x;
margin-left: -52px;
}
.pointilles.bottomright .line-2 {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
background-position: bottom right;
background-repeat: repeat-y;
margin-top: -75px;
}
.pointilles.bottomleft .line-1 {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-horizontal.png);
background-position: bottom left;
background-repeat: repeat-x;
margin-left: 65px;
}
.pointilles.bottomleft .line-2 {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
background-position: bottom left;
background-repeat: repeat-y;
margin-top: -75px;
}
.pointilles.topright .line-1 {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-horizontal.png);
background-position: top right;
background-repeat: repeat-x;
margin-left: -52px;
}
.pointilles.topright .line-2 {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
background-position: top right;
background-repeat: repeat-y;
margin-top: 65px;
}
.pointilles.topleft .line-1 {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-horizontal.png);
background-position: top left;
background-repeat: repeat-x;
margin-left: 65px;
}
.pointilles.topleft .line-2 {
background-image: url(/wp-content/themes/salient-child/img/trace-dash-straight-vertical.png);
background-position: top left;
background-repeat: repeat-y;
margin-top: 65px;
}
</style>
Comments