'Unable to use CircleType.js

How do you include circletype.min.js into html file, and call its function in an external js file?

I've also downloaded the circletype.min.js file into my working directory, however, after following various tutorials, it still doesn't work for me.

Detailed code: HTML:

<!DOCTYPE html>
<html>
<head>
    
    <script type="text/javascript" src="index.js"></script>
    <!-- circle type.js-->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script src="javascript/circletype.min.js"></script>
    <script src="http://circletype.labwire.ca/js/plugins.js"></script>
</head>
<body>
    <div>
        <div class="links">
            <ul id="directory">
                <li class="ul_links"><a href="#">About Us</a></li>
                <li class="ul_links"><a href="#">Our Works</a></li>
                <li class="ul_links"><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

JS:

new CircleType(document.getElementById("directory")).radius(384);
htmljquery-pluginscircletype


Solution 1:[1]

Refer this :

new CircleType(document.getElementById('type'))
  .radius(384);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>circletype-test</title>
</head>

<body>
  <h1 id="type">About Me :</h1>

  <!--circletype.min.js cdn link(you don't need this)-->
  <script src="https://circletype.labwire.ca/dist/circletype.min.js"></script>

  <!--circletype.min.js file path-->
  <script src="circletype.min.js"></script>

  <!--your external js file path-->
  <script src="script.js"></script>
</body>

</html>

Solution 2:[2]

Use these 2 libraries and it will work:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/circletype.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
new CircleType(document.getElementById('type'))
.radius(384);
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 G.W Kalpa Sathjana De Silva
Solution 2 Simeon Nenov

Related Questions