Adding Javascript

I made a post recently, but it was closed while I was in the middle of a conversation with someone about my issue. Sorry if I am being redundant here, but I would love to get a resolution to my problem.

My site requires a good amount of javascript for charts, timelines, etc. However, I keep having issues using JS in Zoho Sites. Code works flawlessly with CodePen and JSfiddle, so I don’t believe it is the code. Also, I have tried various snippets and run into the problem every time.

On most occasions I can get the html and css to load. Problem is I can not get the JS to do any animations, etc.

Take this code codepen: https://codepen.io/patrickhill/pen/YXyMVB?editors=1010

The code uses this external script: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>

I have tried the following layouts:

Put <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> in a <head> </head> section of the snippet.
Put <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> in the <head> </head> section of the page.
Put <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> in the <head> </head> section of the site.
I have also tried taking the contents of https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js and adding it to the site files. To accomplish this I am doing the following:

Copy the contents of the script
Navigate to Settings - Template - Edit HTML/CSS -

Click the carrot next to “js”
Add File
Name file (I used “TweenMax.js”)
Paste the contents of the link.

Navigate to three lines below the js carrot to “others”

click template.conf -
scroll to line 46 (just below where all of the javascript file names are located”
add a coma after the last filename
Press enter
Type: “js/TweenMax.js”

Navigate back to my header sections and use the following script: <script src=“/files/TweenMax.js"></script>

Then I tried <script type="text/javascript" src=“/js/TweenMax.js"></script>
Then I tried <script type="text/javascript" src=“js/TweenMax.js"></script>
Then I tried <script type="text/javascript" src=“files/TweenMax.js"></script>
Then I tried <script type="text/javascript" src=“/files/TweenMax.js"></script>

If nothing else, I get this error: [Error] ReferenceError: Can't find variable: TimelineMax

But I also get these:

[Error] Failed to load resource: the server responded with a status of 404 () (bourbon, line 0)

[Error] Refused to execute PATH/TO/js/TweenMax.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.

[Error] ReferenceError: Can't find variable: TimelineMax

Global Code (year1:8)

[Error] Failed to load resource: the server responded with a status of 404 () (getCurrentPortalUser, line 0)

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (hummingbird-ui.css.map, line 0)

This is just one code example. Again, I have tried this with a few different codepens prior to forking and modifying just to see if it works (last thing I want to do is spend two days on something that won’t end up working).

What am I doing wrong? Can someone please tell me the correct way to call jQuery and other external code?

Access your files securely from anywhere

Zoho Developer Community

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Tout forum

France ZUGs

Zoho SalesIQ Resources

Sticky Posts
Unveiling Zoho Sites 2.0 - A new dimension in website building
Dear Zoho Sites Users, We are thrilled to announce the launch of Zoho Sites 2.0 today! This refresh represents a significant step forward in the capabilities of Zoho Sites and is crucial for creating a lasting and positive impact on our customers' businesses.
Website Accessibility
I have two sites created in Zoho Sites which are both live. Some questions: 1. Are any of the template themes WCAG 2.1 AA compliant? 2. How do I change the format of a sub-heading in the header section? 3. Is there any way to add focus indication for
Visual Editor Webinar
Join our FREE live webinar to learn how to use the Zoho Sites Visual Editor to easily design your website. Our product specialist will demonstrate how this tool will help you customize your website to suit your requirements. Register here: https://www.zoho.com/sites/webinars/
SEO for your Zoho Sites Website
Join our live webinar to learn how to use Zoho Sites' SEO tools to boost your website's ranking. Our product specialist will demonstrate everything you need to know about optimizing your web pages to make them search engine friendly. Register here for free: https://www.zoho.com/sites/webinars/
Zoho Sites Webinar | Integrations
Join our FREE live webinar to learn how to integrate both Zoho and third-party products with your Zoho Sites website. Our product expert will demonstrate how to use these integrations to grow, manage, and retain the customers you bring in. Learn how to take your business forward and build stunningly robust and efficient websites. Register here: https://www.zoho.com/sites/webinars/