Search code examples
javascriptjsplumb

Issues with hover and connecting endpoints jsPlumb

I'm having 2 issues (see http://jsbin.com/umixuf/10/edit)

1) Hover works fine on the endpoints, but my connector won't accept colors on hover. Any thoughts? (See Source1 and Target1 in jsbin)

2) After I declare the endpoints and connect them the anchor point seems to be off. (See Source2 and Target2 in jsbin)

Thanks!

Solution

  • Solution to part 1: The author of jsplumb suggested I use the following:

    connectorHoverStyle: { strokeStyle:"red" }

    Solution to part 2:

    This was my html to begin:

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">   </script>
<script src="http://stage-preview.gage.com/Creative/Microsoft/EZCourseDemo/scripts/jquery.jsPlumb-1.3.16-all-min.js">  </script>

<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
.........
</body>
</html>

    Once I removed

    <!DOCTYPE html>

    the endpoints went back into their proper locations. Not sure if this is a jsbin issue or one of jsplumb, but either way don't leave that tag inside your HTML if you're using jsbin.

    The following image is the before/after of removing that tag. Note how the placement of the endpoint on Target2 (which supposed to be TopCenter) is offset a bit.

    enter image description here