Connector Div

by rgendron

HTML

<div id='divc' data-title="Div C">
<div id ='div1' data-title="Div One">
Div one
</div>
<div id='div2' data-title="Div Two">
  Div two
</div>
<div id='div3' data-title="Div Three">
  Div three
</div>
<div id='div4' data-title="Div Four">
  Div four
</div>
</div>
<!--div id='divx'>
Div X
</div-->

CSS

#divc { margin-left: 111px; margin-top: 14px;border: 1px solid; width:206px}

#divc>div {width: 200px; height:50px; border-top:1px solid;border-bottom:1px solid; padding:4px 3px; margin: 4px 0}
.con {position: absolute; border: 1px solid;}
.con-left { border-right: none}
.con-right { border-left: none}

JavaScript

/* var txt1 = "<p>Text.</p>";               // Create element with HTML  
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("body").append(txt1, txt2, txt3);      // Append the new elements */
    

 
 var info = document.createElement("p");
 function gd(d1) {
 var html = '<br><b>' + d1.data('title') + '</b>';
 html += '<br>height: ' + d1.height();
 html += '<br>innerHeight: ' + d1.innerHeight();
 html += '<br>outerHeight: ' + d1.outerHeight();
 html += '<br>outerHeight(true): ' + d1.outerHeight(true);
 html += '<br>width: ' + d1.width();
 html += '<br>innerWidth: ' + d1.innerWidth();
 html += '<br>outerWidth: ' + d1.outerWidth();
 html += '<br>outerWidth(true): ' + d1.outerWidth(true);
 html += '<br>offset.left: ' + d1.offset().left;
 html += '<br>offset.top: ' + d1.offset().top;
 html += '<br>position.left: ' + d1.position().left;
 html += '<br>position.top: ' + d1.position().top;
 return html;
} 
var dc= $('#divc');
var d1= $('#div1');
var d2= $('#div2');
var d3= $('#div3');
var d4= $('#div4');
var con_width = 100;

el_con(dc,d1, d2, 'c1', 'right')
el_con(dc,d2, d4, 'c2', 'left')

/*var divx = $('#divx');*/
function el_con(dc, d1, d2, id, dir) {
var left_offset = dir == 'right' ? dc.outerWidth() : 0; 
var x = dc.offset().left + left_offset;
var top = midy(d1);
var height = midy(d2)-midy(d1) -1;
con(x,top,height, dir, id);
}

function con(x,top,height,dir, id) {
var left = dir == 'right' ? x : x - con_width;
var divx = $("<div>", {id: id, "class": "con con-" + dir});
$("body").append(divx);
divx.css('left', left + 'px');
divx.css('top', top + 'px');
divx.css('height',  height + 'px');
divx.css('width', con_width + 'px');
}

function midy(el){
	return el.offset().top + el.outerHeight()/2;
}

var html = gd($('#c1')) + gd($('#c2'));
info.innerHTML = html;
$("body").append(info);