Drag and drops not working when served online server. Works locally


(Cipsteroni) #1

I’ve uploaded the OAM for this app into a Wordpress site using Tumult Hype OAM upload application plugin. The drag and drop features are not working (Second page after START button). Both from desktop (mouse drag) and mobile. The whole page scrolls in mobile mode.

https://www.greensight.no/testapp/

For the drag and drop, I am using a jQuery solution I found here.

I installed http://touchpunch.furf.com/ as per @h_classen recommendation. It doesn’t look like its helping. @h_classen is this what you mean by “keep all within hype will be safe”? If so, I might have to bite the bullet and do it this way, or find another solution other than drag and drop.

prototypeV5.zip (1018.5 KB)

I think the issue is in the uploaded file, and not the Wordpress theme, for I uploaded the file to a site where I am using a different Hype OAM file, and the other one is working. But not this one just like it doesn’t on the given Wordpress site.

No sure is this console message is the cause. I can’t find what is causing this of where its coming from. I don’t have any javascript running on the first scene. I cleaned out the Head html to test, but it was still appearing:

SyntaxError: Invalid or unexpected token
at Array.k (prototypev5a_hype_generated_script.js?34186:5)
at HYPE-596.thin.min.js:108
at HYPE-596.thin.min.js:108
at HYPE-596.thin.min.js:108

The mixed content error message is unrelated. It’s happening on every page and has something to do with the hero image.

Thanks for your help.

C


(Mark Hunte) #2

A couple of things.

You have some syntax errors in the stageTwo() function

Remove the }); the closing brackets at bottom.

Also close the quotes on this.style.border = "3 solid #438730; i.e it should be

this.style.border = "3 solid #438730";

Have look at this post on tips to debugging.

Also have a look at the below post which explains about using JQuery in wordpress and Hype.
I have not had to do this for a while but assume this still stands.

Wordpress has it’s own JQuery and this will stop your included jquery working.
The post explains about how to use JQuery in hype and wordpress.


(Cipsteroni) #3

You’re the best @MarkeHunte. :+1:

This is good stuff. Thanks! :pray:


(Cipsteroni) #4

I discovered that the Hype Wordpress OAM import does not copy the < head > html. :frowning:

I’ve posted a question on how to do this. I tried uploading a html file with the css and js global variables within and iframe, but no luck.

I’ve had good luck with Hype animations in Wordpress in the past, but this one is a headache.

I considering serving the Hype folders in another server or external to Wordpress and putting the url in an iframe in Wordpress. Do you think that would work?

Thanks again for your guidance! I appreciate it.


(Mark Hunte) #5

when you say global vars.

Are you talking about :

// global variables


      var totalSelectOne = 0;
      var totalSelectTwo = 0;
      
      var arrayAccum = [0.00,0.00,0.00,0.00,0.00];
      var maxDistanceHold = [0.00,0.00,0.00,0.00,0.00];     
      var electricHold = [0.00,0.00,0.00,0.00,0.00];       
      var hydroFuelHold = [0.00,0.00,0.00,0.00,0.00];   
         
      var mileagePicked = false;
      var electricPicked = false;
      var hydrogenPicked = false;
      var mileageSelected = ' ';
      var electricAccess = ' ';
      var hydrogenAccess = ' ';

If so they are not global. They are local vars.

Global vars do not have the var tag


(Cipsteroni) #6

Hi Mark;

When I put it up on Wordpress, its not recognizing both the js variables and the css in the < head > html.

Here is a screen shot of the error up on Wordpress. It doesn’t recognize arrayAccum which is defined in the head.

Instead of using drag and drop jQuery I decided to just use click and outline with border on the six squares on “select” scene. I only applied it to the top left square to test. It’s not working because the style for that is in the head html as well. At least that is what i think is wrong - its not copying the contents of the head html in the OAM upload to Wordpress which includes the js variables as well as the css. I could be wrong.

<script  type="text/javascript">

// global variables


  var totalSelectOne = 0;
  var totalSelectTwo = 0;
  
  var arrayAccum = [0.00,0.00,0.00,0.00,0.00];
  var maxDistanceHold = [0.00,0.00,0.00,0.00,0.00];     
  var electricHold = [0.00,0.00,0.00,0.00,0.00];       
  var hydroFuelHold = [0.00,0.00,0.00,0.00,0.00];   
     
  var mileagePicked = false;
  var electricPicked = false;
  var hydrogenPicked = false;
  var mileageSelected = ' ';
  var electricAccess = ' ';
  var hydrogenAccess = ' ';
  	
</script>

<style type="text/css">

 .activeButton{
 border-style: solid!important;
 border-width: 3px!important;
 border-color: #438730!important;
}

 .selectButton{
 border-style: solid!important;
 border-width: 4px!important;
 border-color: #d2c551!important;
 border-radius: 10px!important;
 background-color: #4D8077!important;
}
</style> 

Thanks!

https://www.greensight.no/testapp/

prototypeV7.zip (650.5 KB)


(Mark Hunte) #7

It works for me.

I suspect you forgot to set it as an iFrame in the Hype Animations options.


(Cipsteroni) #8

Yes, this is what I am trying to figure our how to do. Thanks!

According to Daniel;
"If you have JavaScript, CSS, or Font files loaded from the head of your exported Hype HTML, you’ll need to embed your Hype document using the ‘iframe’ method. In the list of your documents, switch from <div> to <iframe> ".

Does this mean not using the OAM embed,
[hypeanimations_anim id=“11”]
and hosting the Hype doc somewhere else, then wrapping the URL in and iframe?

Or is this something I need to set up in Hype before saving as a OAM widget?

Its not clear to me if this is something that I wave to do on the Wordpress side or in Hype. If so where? I’m searching for topics in this form and having found anything yet. If you know of an instructional topic, that would be create. I’m new to this and still learning. Thanks!


(Cipsteroni) #9

Ok, I found it!
In Wordpress. In the Hype Animation plugin page.


Unfortunately, still not working. :frowning:
It is just blank.

The research continues.


(Mark Hunte) #10

Yes that’s it. Sorry I thought you were aware of that.

Also I had some odd behaviour were even though I updated the .oam on the Hype Animation plugin page it would still show the older version.

Deleting the Hype Animation (Using the big RED delete button on the page ) and adding a new animation from scratch seemed to fix that.

I also did get the blank page on the wordpress preview, but simply hitting the browser reload button once made it load.

But was not sure if all this was your jam, hype animations plugin or the new worpdress Gutenberg.


(Cipsteroni) #11

Ok. I tried in on another Wordpress site that has a different theme. And it worked there.
So, its the installed theme of the current Wordpress site I’m working on is where the issue is. Looking there.


(Mark Hunte) #12

Lol just saw that Auto correct.

jam = oam


#13

After you switched the container type from Div to Iframe, did you click ‘Update’ next to iframe?


(Cipsteroni) #14

Hi Daniel, Yes I did. See screenshot above. It still didn’t work.
https://www.greensight.no/testapp/
I think its an issue with the Wordpress theme - Enfold. I tried it on another site with a different theme and it worked.
I’ll see if I can resolve it on the theme side. Can’t change the theme, so if I can’t figure it out, I’ll serve the Hype doc on server/folder outside of Wordpress and put it in an iframe on a page in the current site.
Thanks!


(Hans-Gerd Claßen) #15

in your provided url the hypedocument is NOT included as iframe … so your header is stripped off …
image


(Cipsteroni) #16

Hi @h_classen. I did include it in an iframe. For some reason its, not recognizing this…
Thanks for looking.


(Mark Hunte) #17

did you hit the update button like @Daniel mentioned…? you should then see a green updated text next to it


(Cipsteroni) #18

Yes, the green updated appeared.


#19

When you embed using the ‘copy code’ button, you’re not getting the iframe, you’re getting exactly what you copy from the embed code.

To embed this correctly, use:

[hypeanimations_anim id="15"] in the wordpress editor.

This embeds either the ‘div’ method shown in the copy embed code popover, or the iframe method (whichever is selected in the iframe vs div dropdown).


(Cipsteroni) #20

Ok. I’ll try that again.