Please see the working code below. Can someone tell me how to set the opacity of the line connecting the two divs? I could not find anything in the documentation on this. I tried passing setOpacity: 0.5, opacity: 0.5 and using strokeStyle: rgba(120, 120, 240, 0.4) as a property in paintStyle. None of that helped.
Thanks for your help.
The code
<!DOCTYPE html>
<html>
<head>
<title>jsplumb example</title>
<style type="text/css">
.nodes {
border: 2px solid steelblue;
width: 200px;
height: 100px;
}
.div1 {
position: relative;
top: 10%;
left: 10%;
}
.div2 {
position: relative;
top: 20%;
left: 40%;
}
</style>
</head>
<body>
<div class='containerdiv'>
<div class="nodes div1" id="inner1">Inner 1</div>
<div class="nodes div2" id="inner2">Inner 2</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="./jquery.jsPlumb-1.3.16-all-min.js"></script>
<script type="text/javascript">
jsPlumb.bind("ready", function() {
jsPlumb.connect({
source:"inner1", target:"inner2",
paintStyle: {strokeStyle: 'rgb(120,120,240)', lineWidth: 6}
});
jsPlumb.draggable('inner1');
jsPlumb.draggable('inner2');
});
</script>
</body>
</html>
There's two options, the first (that I couldn't make work) is using the connectorClass property, to assign a class-name, or a white-space separated list of class-names, to the connector elements. But, as noted, this didn't seem to work (or I was doing it wrong, which is possible given the time).
On the other hand, given that the svg elements containing the connectors have a predictable class-name, you could simply style that element directly, using CSS:
._jsPlumb_connector {
opacity: 0.5; /* or whatever... */
}