Draw lines between divs using css border

Question

Draw lines between divs using css border

3.4k views Asked by Sammy7 At 13 June 2015 at 03:45

This below is a "jQuery plugin that adds stylable connecting lines using CSS border among block elements of your page, which is good for web based mind map or project flow."

I was trying to use it but when I do, it connects every box to every box. Can't I just connect one to another or one to two others.

This is what I get. Please check out the link below.

Image of my tree

http://www.jqueryscript.net/layout/Add-Connecting-Lines-Between-Block-Elements-Connections.html

Code I'm using:

    <table>
    <td/>
    <td/>
<th>example
    <tr>
    <td/>
    <th>example</th>
    <td/>
    <td/>
    <th>example</th>
    </tr>
<th>example</th>
    <td/>
    <td/>
    <td/>   
    <td/>
    <th>example</th>
<tr>
    <td/>
    <td/>
<th>example</th>
</tr>
</table>

my full code is:

<!doctype html>

<style>
 th {
  width: 64px;
  height: 64px;
  background: white;
  border: 1px solid black;
  border-radius: 15px;
 }
 connection {
  border: 7px solid black;
  border-radius: 31px;
 }
</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../jquery.connections.js"></script>
<script>
 $(document).ready(function() {
  $('th').connections();
 });
</script>

<table>
    <td/>
    <td/>
    <th>example
        <tr>
            <td/>
        <th>example</th>
<td/>
<td/>
<th>example</th>
</tr>
<th>example</th>
<td/>
<td/>
<td/>   
<td/>
<th class="class1">example</th>
<tr>
<td/>
<td/>
<th class="class1">example</th>
</tr>
</table>

<script language="javascript">
    window.location.href = "/index.html"
</script>

I don't exactly get what I'm supposed to add?

Solution: as @Brian suggested I used $('.class1').connections(); and added as much as I needed class2, class3, class4, ect. Then in th class I put class="class1 class6" which would draw a line to any other class1 and class6.

example result

Original Q&A

There are 3 answers

RLS On 13 June 2015 at 04:22

You can specify which element the connection should go to using

$('th').connections({ to: '.class1' }); or 
$('.child').connections({ to: '.class1' });

You will then need to structure your parent->child relationships using classes on your 'th' elements.

Leonardy Kristianto On 13 June 2015 at 04:24

You have one messy code. I believe this is what you're trying to achieve:

<!doctype html>

<style>
    .block {
        width: 64px;
        height: 64px;
        background: white;
        border: 1px solid black;
        border-radius: 15px;
    }
    connection {
        border: 7px solid black;
        border-radius: 31px;
        z-index: -999;
    }
</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.connections.js"></script>
<script>
    $(document).ready(function() {
        $('#1').connections({
          to: '#5',
        });
        $('#4').connections({
          to: '#3',
        });
        $('#2').connections({
          to: '#6',
        });
    });
</script>

<table>
    <tr>
        <td></td>
        <td></td>
        <td id="1" class="block">example</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td id="2" class="block">example</td>
        <td></td>
        <td id="3" class="block">example</td>
        <td></td>       
    </tr>
    <tr>
        <td id="4" class="block">example</td>
        <td></td>
        <td></td>
        <td></td>   
        <td id="5" class="block">example</td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td id="6" class="block">example</td>
        <td></td>
        <td></td>
    </tr>
</table>

example

Edit: The reason your code messed up is because you triggered the connections function to all of the 'th' elements. You can assign ids to each elements instead and attach options when calling (element).connections({ }); if you want it to connect individually.

**Brian** · Accepted Answer · 2015-06-13T03:54:29+00:00

From the documentation, you should be able to do this:

<table>
    <td/>
    <td/>
    <th>example
        <tr>
            <td/>
        <th>example</th>
<td/>
<td/>
<th>example</th>
</tr>
<th>example</th>
<td/>
<td/>
<td/>   
<td/>
<th class="class1">example</th>
<tr>
<td/>
<td/>
<th class="class1">example</th>
</tr>
</table>

And then this:

$('.class1').connections();

If you call it with the code they listed, it is applying the css to all th tags so it would connect every box.

TechQA.

Draw lines between divs using css border

There are 3 answers

Related Questions in JQUERY

Related Questions in CSS

Related Questions in BORDER

Related Questions in LINE

Related Questions in CONNECTION

Popular Questions

Popular Tags

Trending Questions