Can't see animation in wordpress even with height defined


#1

Hi,
I am having a issue seeing my animation in a wordpress site.
this is a development site (on a subdomain) and the resources file is uploaded onto the main site.

i can see the animation when i use an iframe - but some people are having issues seeing the animation fully load - or having some of the circles around text not show up on IE and even firefox.

When i try to insert the animation without the iframe, i can’t see it. I have defined a height of 900px on the surrounding

… which doesn’t do anything. I just don’t know what else to do!

Any help would be so appreciated!

  1. here is the iframe page
    the animation is halfway down the page under "sectors

  2. here is the problem page
    i am using:

thanks!!!


(Mark Hunte) #2

Two things.

It is not understanding the Jquery commands.

Which may mean more than one jQuery is being seen.
I say this because in my tests I get it cannot find the jQuery file. But I don not get that with yours.

As I scroll down I get

[Log] Error in loadLabel: TypeError: $ is not a function. (In ‘$(element)’, ‘$’ is undefined) (HYPE-526.thin.min.js, line 14, x32)

Note the

'$' is undefined


#3

THanks for the reply Mark! I really appreciate it!

hmmm - i did not make the animation, i had someone create it and i am just adding it to a website that i am designing… so - bear with me - i don’t really know jQuery…

i added this to the page:
`

`

— jquery-3.1.0.min.js IS THE PROBLEM FILE. I HAVE LAYERSLIDER PLUGIN WHICH CLASHES WITH THIS WHEN IT IS ADDED TO THE HEAD. IT COULD BE THE VERSION OF JQUERY OR THERE MAY BE ANOTHER JQUERY IN THE THEME FILES??

i asked the animator and he said that he thought that if i already had jQuery loaded on the site that it would be ok and not need that jquery-3.1.0.min.js

Any thoughts?? :wink:


(Mark Hunte) #4

Ok in tests I got it working on my Wordpress site.

There are few issues.

The first one was what I said. Wordpress uses it’s own JQuery plugin and apparently has a no clash policy on by default.
This means any jQuery plugin used by Hype will not be allowed to clash but Hype will not see Wordpress’s JQuery.

The simple fix for this is anywhere you call JQuery using the dollar sign $ replace the dollar sign with jQuery

So for example $(label).text( $(element).attr("alt") );

becomes

jQuery(label).text( jQuery(element).attr("alt") );

Second problem.

As @jonathan explains here:

When you are embedding as you are. Then you need to wrap the Hype Div in a div with a set size.

    <div style="width:1260;height:768px">

live="polite">
<script type="text/javascript" charset="utf-8" src="http://hobbstowne.com/graph_svg/graph_svg.hyperesources/graphsvg_hype_generated_script.js?50992"></script>
    </div>

    </div>

You need to point to the Hype Javascript file and not leave it as the default path that is exported.
So make sure you use the full path to it

I assume it will be something like

http://hobbstowne.com/graph_svg/graph_svg.hyperesources/graphsvg_hype_generated_script.js?50992