Troubleshooting Embedding a Waypoints Animation

Using JavaScript with Hype
1

Ok, I have a problem.
I test your lesson with this tutorial: http://hype.desk.com/customer/portal/articles/1438517-starting-an-animation-by-scrolling-to-it-with-jquery-waypoints-

I upload files and insert the code but result is this: http://neolondoncapital.com/HYPE_test_1

The problem is that the animation does not starting…
When I open the file waypoints.html from my computer - there is no problem. The animation is starting. But when the animation is uploaded in Joomla, it doesn’t start.
How to handle this? Can you help me, please?

2

I’m not seeing any reference to the waypoints library which handles this function. Can you add this to the head of your document?

<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>

3

This code is there. I check it again.

Screen Shot 2015-08-13 at 09.57.51.png696×510 66.6 KB

When I type the address: http://neolondoncapital.com/images/hype/waypoints.html
the animation is starting.
There is my files:
waypoints.zip (221.2 KB)

4

When I scroll down, the animation starts, so it looks like the waypoint is working now. Are you all set?

5

Unfortunately not.
In the link: h t t p : //neolondoncapital.com/images/hype/waypoints.html - works fine, but it isn’t embedded animation in my page. This is just the direct way to file “waypoints.html” on my FTP.
The problem is when I try to embed the animation in an article like here: h t t p : //neolondoncapital.com/HYPE_test_1
My code in JCE editor look like this:

Maybe the problem is somewhere there? Any idea?

6

You’ll need to copy the required assets for Waypoints over to the site where it is embedded. Add this code to the page:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>

… and it should work.

When you embed the generated JS file that Hype creates, it will not load anything else output to the ‘head’ of other HTML pages it is embedded on.

7

Ok, I understand!
Now the code looks like:

…but maybe I miss something, because it not works again.

8

If you open up the developer console in Safari, you’ll see that there are no errors on this page: http://neolondoncapital.com/images/hype/waypoints.html

But there are 4 errors on this page: http://neolondoncapital.com/HYPE_test_1. I’m not positive what is causing this, but it might have to do with the fact that you have multiple versions of jQuery on the same page: Line 39, 272, and 241. Can you just use one at the top of the page? (You can remove the one that is near the waypoints JS file).

9

I embed the animation in other site and the result is the same: http://passati.com/HYPE_test_1
So sad.

10

Hi! It works here: http://eurotest-control.bg/HYPE_test_1
Why does this happen? What is the difference?

11

On this page, I see this error:

Error in waypoint: TypeError: undefined is not a function (evaluating '$('#redbox').waypoint (function(){
		hypeDocument.startTimelineNamed('bluebox');
	}, { offset: 'bottom-in-view' })')

That seems to be related to the earlier issue that I mentioned: You have three versions of jQuery loaded on a single page. Can you remove two and try again?