cypkj6
November 26, 2019, 7:02pm
1
Hi!
I found this thread:
Hey there! I’m doing some google maps stuff in Glitch at the moment and have a very minor question I thought was just about worth asking here. Because of the old-school way the Google Maps API is loaded via a script tag, there’s no require() or import() in the code and so Glitch marks every API call with a red warning dot.
[42]
I was wondering: is there some kind of nice way around this? Like maybe some Glitch feature I’m not aware of, or even a little JS syntax trick that gets rid of the dot…
Which describes a similar problem. I’m using the js library ScrollMagic hosted on cloudflare.
I would think that there is something wrong with how I imported it, I’m very new to all of this so maybe there is, but I have seen my JS code work 10% of the time. I edited width attribute in css, and when I refreshed the page, my scrollmagic triggers appeared and functioned. When I refreshed the page again after not changing anything, the scrollmagic triggers did not appear, which lead me to believe it is a glitch issue. Is there a solution to this or should I just use another coding program?
The other thread said something about using /* global google */
Here is my project: Cwi Rails
Thank you!
Bubbler
November 26, 2019, 11:34pm
2
I just looked through index.html
file, and I believe the code has a problem.
Your index.html
loads /script.js
on line 9, inside <head>
:
<head>
...
<script src="/script.js"></script>
...
</head>
Then it loads some library code from cdnjs and then loads /script.js
again , at the bottom of <body>
. The first <script>
is also totally wrong.
...
<script>
src =
"https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js";
integrity = "sha256-peenofh8a9TIqKdPKIeQE7mJvuwh+J0To7nslvpj1jI=";
crossorigin = "anonymous";
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"
integrity="sha256-2p2tRZlPowp3P/04Pw2rqVCSbhyV/IB7ZEVUglrDS/c="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.velocity.min.js"
integrity="sha256-IP/usbYnTYjqGgX3mkFOa7EhicdRZRTHUGfQgdzUeBk="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"
integrity="sha256-XBVALc3QsDSQiDtiaBwNZ2rxCJTHzlUhhlDQ84J8bw8="
crossorigin="anonymous"
></script>
<script src="/script.js"></script>
</body>
Here are my suggestions:
Remove the <script>
in <head>
.
Fix the first <script>
in <body>
and, since it’s a plugin for ScrollMagic (at least it looks like one), move it below other ScrollMagic scripts, but before /script.js
:
...
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"
integrity="sha256-2p2tRZlPowp3P/04Pw2rqVCSbhyV/IB7ZEVUglrDS/c="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.velocity.min.js"
integrity="sha256-IP/usbYnTYjqGgX3mkFOa7EhicdRZRTHUGfQgdzUeBk="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"
integrity="sha256-XBVALc3QsDSQiDtiaBwNZ2rxCJTHzlUhhlDQ84J8bw8="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"
integrity="sha256-peenofh8a9TIqKdPKIeQE7mJvuwh+J0To7nslvpj1jI="
crossorigin="anonymous"
></script>
<script src="/script.js"></script>
</body>
1 Like