CODEWITHSUNDEEP
jquerycssborderlineconnection
Sammy7
Sammy7

Reputation: 372

Draw lines between divs using css border

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

Upvotes: 0

Views: 3430

Answers (3)

RLS
RLS

Reputation: 311

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.

Upvotes: 0

Leonardy Kristianto
Leonardy Kristianto

Reputation: 104

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.

Upvotes: 0

Brian
Brian

Reputation: 1553

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.

Upvotes: 1

Related Questions