0

I want a functionality to be implemented where i can connect 2 divs with a line on click event. The concept is about matching contents in 2 different columns same as match the following. Please help me as i have tried everything I could as I don't want to use any external or HTML5 canvas. Is it possible to achieve with jquery, css and html only. Please reply.Thank you.

aledalgrande
  • 5,167
  • 3
  • 37
  • 65
Manish
  • 76
  • 1
  • 1
  • 8
  • Do you mean you want to match some column A with some following column B when the user clicks on A? And what is the matching you're talking about? The question is not clear. – aledalgrande May 29 '14 at 07:21
  • Suppose There are 2 columns A and B with 4 rows each. Now suppose user clicks a row in column A and then clicks a row in column B i want to draw or display a line between both the above mentioned rows. Similarly for each row – Manish May 29 '14 at 08:41
  • OK, what did you try already? – aledalgrande May 29 '14 at 17:51
  • I'll add my code folder for you to check...it gives me insertAdjectHTML null exception...Thank you – Manish May 30 '14 at 06:33
  • Something similar: http://stackoverflow.com/questions/20948513/updating-line-between-divs-in-javascript – Abhitalks May 30 '14 at 08:58

2 Answers2

4

I might have a potential idea for a line consisting of three lines - horizontal (from element), vertical (up or down) and horizontal (to another element) again. You could create 2 very small columns with rows between the column A and B without borders, then using jquery .css add coresponding borders to the right columns and rows.

If you wish for animating the lines, you could create divs that have a size of 0 initialy, then animate the size of the columns so the borders appear.

Here's a basic fidde: http://jsfiddle.net/3xPpc/ HTML:

  <div class="big-col">
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
</div>
<div class="small-col">
    <div id="row-1-left" class="small-row"></div>
    <div id="row-2-left" class="small-row"></div>
    <div id="row-3-left" class="small-row"></div>
    <div id="row-4-left" class="small-row"></div>
    <div id="row-5-left" class="small-row"></div>
    <div id="row-6-left" class="small-row"></div>
    <div id="row-7-left" class="small-row"></div>
    <div id="row-8-left" class="small-row"></div>
</div>
<div class="small-col">
    <div id="row-1-right" class="small-row"></div>
    <div id="row-2-right" class="small-row"></div>
    <div id="row-3-right" class="small-row"></div>
    <div id="row-4-right" class="small-row"></div>
    <div id="row-5-right" class="small-row"></div>
    <div id="row-6-right" class="small-row"></div>
    <div id="row-7-right" class="small-row"></div>
    <div id="row-8-right" class="small-row"></div>
</div>
<div class="big-col">
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
</div>

CSS: .big-col { float: left; }

.small-col {
float: left;
}

.big-row {
width: 200px;
height: 100px;     
}

.blue {
background-color: blue;
}

.green {
background-color: green;
}

.small-row {
width: 40px;
height: 50px;     
}

#row-1-left {
border-bottom: 1px solid orange;
}

#row-5-right {
border-bottom: 1px solid orange;
}

#row-2-right, #row-3-right, #row-4-right, #row-5-right {
border-left: 1px solid orange;
}

All you have to do is to add the borders on click with jQuery.

oneday
  • 1,599
  • 5
  • 18
  • 29
1

Alright. Here's a piece of example of what you can do about this. Of course it can be much more flexible and elegant by some work. Right now it's connecting the divs on same row / column. The basic is checking the top / left positions of clicked elements and append some additional divs to draw lines. For the divs on same row i.e.

if (pos_1.top == pos_2.top) {
  // same row
  if (Math.abs(pos_1.left - pos_2.left) == 100) {
    // adjacent
      var bar = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top - 2 + div_1.height() / 2) + "px", "height" : "5px", "width" : "50px", "left" : ((pos_1.left > pos_2.left ? pos_2.left : pos_1.left) + 50) + "px" });
      $("body").append(bar);          
  } else {
    // same row not adjacent
      var bar1 = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top + 50) + "px", "height" : "20px", "width" : "5px",  "left" : (pos_1.left - 2 + div_1.width() / 2) + "px"});
      var bar2 = bar1.clone().css({"left" : (pos_2.left - 2 + div_2.width() / 2) + "px"});
      var bar3 = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top + 65) + "px", "left" : ((pos_1.left > pos_2.left ? pos_2.left : pos_1.left) + 25) + "px", "width" : "200px", "height" : "5px" });
      $("body").append(bar1).append(bar2).append(bar3);
  }
}

HERE'S THE FIDDLE

Batu.Khan
  • 3,060
  • 2
  • 19
  • 26