Search code examples
javascriptjqueryhtmlcsstagging

Linking CSS to Taggle.js

I am fairly new to CSS and javascript. I have been trying to implement the Tagging system as provided in Taggle.js (http://sean.is/poppin/tags).

Using this script : 

  <html>
  <body>
    Hello!! <br>
    <form id="form1" action="http://127.0.0.1:5000/post">
      <fieldset>
        Tags:
        <div id ="freeTags" ></div>
        <p id='tag'></p><br><br>
     </fieldset>
    </form>

    <script src="./node_modules/taggle/assets/js/taggle.js"></script>
    <script>
    var text = document.getElementById('tag');
    new Taggle('freeTags', {
      onTagAdd: function(event, tag) {
        text.innerHTML = "You just added " + tag;
      },
      onTagRemove: function(event, tag) {
        text.innerHTML = "You just removed "+ tag;
      },
      duplicateTagClass : "bounce"

    });
    </script>
  </body>
</html>

I am unable to get the same effect as on the website (fancy text box) instead what I have been getting is this:

enter image description here

And it is also not implementing the 'bounce' function although I installed bounce.js using bower.

I think it must be the issue of CSS linkage to HTML. Can any one help in untangling this issue?

Solution

  • The documentation for taggle says the bounce effect is handled by the taggle.css file ... which your code example above doesn't include. Suggest this file also deals with styling of the elements youve said are missing. So just link this file in your document and re - test.

    Find the CSS file in the repo you link to above the folder assets/css/ (find here), and save either taggle.css or taggle.min.css (for production) to your server and add the following to your page immediately after the <html> opening tag...

    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="path/to/taggle.min.css">
    </head>
    <body>
        <!-- your content... -->
    </body>
</html>