Home/ Questions/Q 9208685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T00:40:12+00:00

Please see the working code below. Can someone tell me how to set the

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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... */
}

    JS Fiddle demo.

    • 0