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.
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.
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.
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.
I discovered that the Hype Wordpress OAM import does not copy the < head > html.
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?
// 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 = ' ';
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>
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!
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.
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!
