How to connect HTML Divs with Lines?
JavascriptJqueryHtmlCssJavascript Problem Overview
On my page I have a set of div elements that should be connected with lines like I showed in the image below. I know that with a canvas I can draw lines between these elements, but is it possible to do it in another way in html/css?
Javascript Solutions
Solution 1 - Javascript
You can use SVGs to connect two divs using only HTML and CSS:
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>
(please use seperate css file for styling)
Create a svg line and use this line to connect above divs
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
where,
x1,y1 indicates center of first div and
x2,y2 indicates center of second div
You can check how it looks in the snippet below
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
Solution 2 - Javascript
I made something like this to my project
function adjustLine(from, to, line){
var fT = from.offsetTop + from.offsetHeight/2;
var tT = to.offsetTop + to.offsetHeight/2;
var fL = from.offsetLeft + from.offsetWidth/2;
var tL = to.offsetLeft + to.offsetWidth/2;
var CA = Math.abs(tT - fT);
var CO = Math.abs(tL - fL);
var H = Math.sqrt(CA*CA + CO*CO);
var ANG = 180 / Math.PI * Math.acos( CA/H );
if(tT > fT){
var top = (tT-fT)/2 + fT;
}else{
var top = (fT-tT)/2 + tT;
}
if(tL > fL){
var left = (tL-fL)/2 + fL;
}else{
var left = (fL-tL)/2 + tL;
}
if(( fT < tT && fL < tL) || ( tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)){
ANG *= -1;
}
top-= H/2;
line.style["-webkit-transform"] = 'rotate('+ ANG +'deg)';
line.style["-moz-transform"] = 'rotate('+ ANG +'deg)';
line.style["-ms-transform"] = 'rotate('+ ANG +'deg)';
line.style["-o-transform"] = 'rotate('+ ANG +'deg)';
line.style["-transform"] = 'rotate('+ ANG +'deg)';
line.style.top = top+'px';
line.style.left = left+'px';
line.style.height = H + 'px';
}
adjustLine(
document.getElementById('div1'),
document.getElementById('div2'),
document.getElementById('line')
);
#content{
position:relative;
}
.mydiv{
border:1px solid #368ABB;
background-color:#43A4DC;
position:absolute;
}
.mydiv:after{
content:no-close-quote;
position:absolute;
top:50%;
left:50%;
background-color:black;
width:4px;
height:4px;
border-radius:50%;
margin-left:-2px;
margin-top:-2px;
}
#div1{
left:200px;
top:200px;
width:50px;
height:50px;
}
#div2{
left:20px;
top:20px;
width:50px;
height:40px;
}
#line{
position:absolute;
width:1px;
background-color:red;
}
<div id="content">
<div id="div1" class="mydiv"></div>
<div id="div2" class="mydiv"></div>
<div id="line"></div>
</div>
Solution 3 - Javascript
You can use https://github.com/musclesoft/jquery-connections. This allows you connect block elements in DOM.
Solution 4 - Javascript
It's kind of a pain to position, but you could use 1px
wide divs as lines and position and rotate them appropriately.
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="line" id="line1"></div>
<div class="line" id="line2"></div>
.box {
border: 1px solid black;
background-color: #ccc;
width: 100px;
height: 100px;
position: absolute;
}
.line {
width: 1px;
height: 100px;
background-color: black;
position: absolute;
}
#box1 {
top: 0;
left: 0;
}
#box2 {
top: 200px;
left: 0;
}
#box3 {
top: 250px;
left: 200px;
}
#line1 {
top: 100px;
left: 50px;
}
#line2 {
top: 220px;
left: 150px;
height: 115px;
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
}
Solution 5 - Javascript
Definitely possible with any number of libraries and/or HTML5 technologies. You could possible hack something together in pure CSS by using something like the border-bottom property, but it would probably be horribly hacky.
If you're serious about this, you should take a look at a JS library for canvas drawing or SVG. For example, something like http://www.graphjs.org/ or http://jsdraw2dx.jsfiction.com/
Solution 6 - Javascript
Check my fiddle from this thread: https://stackoverflow.com/questions/23927663/draw-a-line-connecting-two-clicked-div-columns/23950589#23950589
The layout is different, but basically the idea is to create invisible divs between the boxes and add corresponding borders with jQuery (the answer is only HTML and CSS)
Solution 7 - Javascript
Create a div that is the line with the code like this:
CSS
div#lineHorizontal {
background-color: #000;
width: //the width of the line or how far it goes sidewards;
height: 2px;
display: inline-block;
margin: 0px;
}
div#block {
background-color: #777;
display: inline-block;
margin: 0px;
}
HTML
<div id="block">
</div>
<div id="lineHorizontal">
</div>
<div id="block">
</div>
This will display a block with a horizontal line to another block.
On mobile devices you could use (caniuse.com/transforms2d)