Adding Javascript

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: 


  1. 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. 
  2. 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.
  3. 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.
  4. 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: 
    1. Copy the contents of the script
    2. Navigate to Settings - Template - Edit HTML/CSS - 
      1. Click the carrot next to “js” 
      2. Add File
      3. Name file (I used “TweenMax.js”)
      4. Paste the contents of the link.
    3. Navigate to three lines below the js carrot to “others” 
      1. click template.conf - 
      2. scroll to line 46 (just below where all of the javascript file names are located”
      3. add a coma after the last filename 
      4. Press enter
      5. Type: “js/TweenMax.js”
    4. Navigate back to my header sections and use the following script: <script src=“/files/TweenMax.js"></script>
      1. Then I tried <script type="text/javascript" src=“/js/TweenMax.js"></script>
      2. Then I tried <script type="text/javascript" src=“js/TweenMax.js"></script>
      3. Then I tried <script type="text/javascript" src=“files/TweenMax.js"></script>
      4. 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?