The following code runs somewhat inside the following snippet. It does cut off the bottom half. But it doesn't work at all on CodePen.io or my private server. It generates 1000+ errors on CodePen. Why could this be? I am very confused as to what I am missing.
wheel = new wheelnav('wheelDiv');
wheel.clockwise = false;
wheel.createWheel(['title-0', 'title-1', 'title-2', 'title-3', 'title-4']);<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wheelnav/1.7.0/wheelnav.min.js"></script>
<div id="wheelDiv"></div>What I'm running on my home server:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js">
</script>
<script src="https://cdn.jsdelivr.net/wheelnav/1.7.0/wheelnav.min.js" type="text/javascript">
</script>
<title></title>
</head>
<body>
<div id="wheelDiv"></div>
<script>
wheel = new wheelnav('wheelDiv');
wheel.clockwise = false;
wheel.createWheel(['title-0', 'title-1', 'title-2', 'title-3', 'title-4']);
</script>
</body>
</html>
The wheelnav.js library currently works with modified raphael.js. Your current issue fixed here.
You can use modified raphael.js from here: https://cdn.jsdelivr.net/npm/[email protected]/js/dist/raphael.min.js
Here is my working template on CodePen: https://codepen.io/softwaretailoring/pen/OWYBjy