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?




      • Sticky Posts

      • 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

      • 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.

      • 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/