Animated Tag Cloud jquery is not working on codepen?

Hi everyone,

It’s my first post, before posting here, I’ve searched to be sure that my jquery was enabled on codepen and everything is ok as long as I know (I am a total beginner by the way :wink: ).

It’s an opensource .js file realeased on that page : “http://www.goat1000.com/tagcanvas.php”.

The guy also gave a direct “ready-to-work” html page link including that .js file here with an “example page” : http://www.goat1000.com/tagcanvas-examples.php

I copy-pasted it directly in my html page, I changed the src for the .js file so as codepen know where the .js are located. I used the jquery plugin option here because the author also offer a stand-alone option, but as I don’t know the difference, I used the jquery one. I know there is a specific place in the jquery field but it should be able to work on the html as well right?

Here is my try : https://codepen.io/CyberBaguatte/pen/BZdEbM

Any help would be welcome, I am sure there must be a simple trick here :slight_smile:

Have a good day!

Notice at the bottom of my chrome dev tools you are getting insecure errors.

Instead, you need to go into settings, javascript, and include your external libraries. Importing than in script tags is insecure.

First of all thank you codyseibert for your prompt reply. So, if I understand it well, it’s a security issue generated because I am using a link directly in the codepen page.
I tried to import the libraries directly from the pen settings, and it appears that it’s http:// links anyway, so codepen is apprently not willing to allow me to use them.

I have no clue on how to solve that apart from uploading the libraries on a https website to use them.

Thank you again for your help.

You could probably find a web app which allows you to upload a file and have it hosted under https. That would be the quickest thing to do, or just copy and paste all of the code from the file into your index.html file somewhere.

My honest advice is invest time in learning how to use an actual code editor, and how to host a local web server. Apache (via LAMP), Nginx, or Node’s http-server should be pretty easy to setup via watching a youtube tutorial, and it puts you in a much better position for actually understanding file systems and hosting.

but, you could always try jsbin or jsfiddle… they might allow you to upload custom library files and put it behind https.

Actually, I found this interesting site where you can provide it a http URL and it will host it behind https… I’m not sure for how long though.

https://www.proxysite.com/

for example, told it to proxy to the tagcanvas.js file hosted on that goat site:

https://us8.proxysite.com/process.php?d=joV9rFmPUF9dht%2BOBQeDwMdJOjQUi2xxr8uhwTnFsfuoWW%2BzNzt0Hg%3D%3D&b=1&f=norefer