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.
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.
From the documentation, you should be able to do this:
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.