I am using jsPlumb to connect a bunch of divs (much like a flow chart). All of the divs are contained in one parent div which is scrollable. Sort of like the code below, but with more divs inside the container div.

<div style="height:500px;width:500px;overflow:auto" id="container">
   <div id="node1"></div>
   <div id="node2"></div>
   <div id="node3"></div>
   <div id="node4"></div>
   <div id="node5"></div>
</div>

My problem is that if I scroll the div, the connecting lines generated by jsPlumb just stay in place and don't scroll with the divs that they are supposed to be connected to. I've tried using jsPlumb.repaint() but still no luck. It appears jsPlumb is not taking into account the scroll offset of the caontainer div. Is there some way to fix this? I really want to avoid having to move the divs being connected out of the container div into the body since this would entail some very annoying css/html recoding.

I am using jsPlumb to connect a bunch of divs (much like a flow chart). All of the divs are contained in one parent div which is scrollable. Sort of like the code below, but with more divs inside the container div.

<div style="height:500px;width:500px;overflow:auto" id="container">
   <div id="node1"></div>
   <div id="node2"></div>
   <div id="node3"></div>
   <div id="node4"></div>
   <div id="node5"></div>
</div>

My problem is that if I scroll the div, the connecting lines generated by jsPlumb just stay in place and don't scroll with the divs that they are supposed to be connected to. I've tried using jsPlumb.repaint() but still no luck. It appears jsPlumb is not taking into account the scroll offset of the caontainer div. Is there some way to fix this? I really want to avoid having to move the divs being connected out of the container div into the body since this would entail some very annoying css/html recoding.

• javascript
• jsplumb

2 Answers 2

It turns out that simply using jsPlumb.repaintEverything(); redraws the lines in the correct positions. jsPlumb.repaint() seems to be for repainting the lines for a specific element. For example, jsPlumb.repaint('div_id_goes_here');

Your question/answer helped me. Let me extend it with the code I used:

    $('#container').scroll(
                function(){
                    jsPlumb.repaintEverything();
                }
            )

This will cause the connections to be repainted as you scroll the container. On IE, it has a little delay depending on the scenario (child nodes move and then the connections move).