Hype 4 Pro animations getting 404 errors for Hype Javascript on Wordpress sites

Hi everyone. I’m new to Hype and only purchased it last night but already I have a simple animated logo working. Very easy and fun to do.

Only issue is that I use Oxygen Builder as my way to develop Wordpress sites as it’s themeless (Wordpress’s themes are not even loaded as Oxygen Builder takes the place of the theme) and therefore I can start from scratch with a blank slate when I create Wordpress sites.

I installed the Hype Wordpress plugin yesterday and loaded in my simple animation and I’m getting 404 errors finding the javascript hype creates.

Where do I start figuring this out.

Here is a couple of pages I created with nothing but a header and footer and embedded the shortcake Hype creates. Whether I run it with Oxygen activated or whether I deactivate Oxygen and all of my other plugins except the hype one it still gives me this error.

https://aztecinternet.com/branding/
https://paulrandall.co.uk/nutritionella/

Additional info: I tried to add the shortcode both within the standard Wordpress contents area as text and bring that in dynamically through Oxygen Builder. I also tried to embed the HTML by exporting it with the Hype plugin and dropped the exported HTML into a HTML/PHP code block and I also tried with a shortcode using Oxygen’s “Add Shortcode” functionality and nothing worked. All got the same 404 error.

Please point me in the right direction as I can’t wait to start incorporating animations in my pages.

Thanks in advance and I look forward to all the experimentation.

How are you placing these projects? Personally, I find that I have better results when using iFrame…

Hi and thanks for getting back to me. It’s placed by embedding the shortcode that the Hype Wordpress plugin creates. And I have also used the HTML from the Copy Code green button and dropped that directly in an Oxygen Code block (they can embed HTML/PHP/CSS and Javascript).

But when you look in the Browser console (tried Safari, Firefox and Chrome) it produces a 404 error for the Javascript Hype produces which basically means the file is not found. So whether I embed it in a Div or iFrame it will make zero difference for that error. It’s simply not finding the Hype Javascript.

Well, personally, I don’t really use the plugin. Instead, I usually just upload the files to the server — FileZilla / SFTP.

That’s where I’d start looking to troubleshoot the problem. Is the file actually there…

First, what’s the SyntaxError? But, that’s kinda irrelevant, as you should be able to load the file. For some reason, you can’t. So, that seems to narrow it down to one of two things…

  1. You can’t upload it — Perhaps your system administrators prevent the addition of such files. Are you in full control of your server? Maybe there’s something preventing the normal operation of the “OAM” import. It’s basically just a .zip file, that gets expanded on the server.
  2. You can’t load it — Again, are you in full control of your server? Perhaps unexpected JavaScript files are being blocked.

The Hype and Oxygen plugin work together! I just did a fresh installation of the Oxygen Atom sample site and added a Hype animation using the plugin. No problems there. Your problem does seem related to a snippet in your page. Here is the code on your page causing at least one problem…

<script type="text/javascript">
var $buoop = {required:{e:13,f:-1,o:-1,s:-1,c:-1},test:false,newwindow:true,style:"top",insecure:on,unsupported:on,mobile:on,shift_page_down:,api:2020.05};

function $buo_f(){
var e = document.createElement("script");
e.src = "//browser-update.org/update.min.js";
document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f, false)}
catch(e){window.attachEvent("onload", $buo_f)}
</script>

Please fix that first and look if the problem prevails.

Hi and thanks again for getting back to me. I have full control of the server as it’s a server I pay monthly for and I am the mail admin of it. I’ve uploaded the files instead of using the plugin and I get the same error. It just can’t recognise the path to the Hype main Javascript.

Maybe it’s a security setting I turned on but they usually play OK with all of the plugins I turn on. It just doesn’t like the path to the script that’s generated.

Hi Max and thanks for having a look and going to the trouble of setting up a bare bones Oxygen based WP site to test the plugin.

I corrected that error you mentioned by disabling the plugin that causes it. It’s just a browser sniffer that moans if someone is using an outdated browser like Internet Explorer.

I still get the 404 error but am wondering if the security settings in this Wordpress install are causing the path to the Hype Javascript to throw a 404.

What do you think? :smiley:

Well the runtime contains the eval command not sure if that might be the cause …what’s the security plugin WebArks?

Hi, @paulrandall, and welcome!

Don't know if you've seen this forum post

and especially the "Troubleshooting" section near the top. We use the Autoptimize plugin which caused the 404 issue you're getting; the suggestion there fixed it easily.

Not sure you have something similar going on, but maybe. . .

Hi Max.

I’m not currently using any plugins for security. I have a Plesk 18 server running on CentOS 7 which has a number of security measures you can take to secure WordPress sites. When I set up my site I turned them all on.

If all of the kind suggestions on here don’t work then I’m thinking of setting up a sub domain of my main domain name with no security measures set up on it. Then installing Wordpress, Oxygen and then setting up my animation with the plugin and checking it works. Then one at a time turning on the security measures until it throws the 404 again. Then I’ll know which of the security options to avoid. I can reverse most of them so I can then turn off that particular security measure on my actual site.

At the moment it’s just a test anyway so not critical. I just want to know what works and what doesn’t so I can start working on a design project with animation.

1 Like

Wait a second… the runtime is loaded dynamically if needed. Maybe it’s because you have a custom permalink structure. The bad thing about the OAM exporter is that this option isn’t available in the advanced exporter because there you could switch from a local to CDN runtime. As I am developing an export script I can’t even offer most option to folks that want to do an advance export… although an OAM is actually only an ZIP file this could be fixed.

So, maybe also check your permalink structure and try it with a default one

Hi Max,

I reluctantly switched my permalink structure to the default ID based one (obvs a little worried about Google crawling it) and it made no difference. But I think you’re onto something. I can see that the custom JavaScript file created by Hype calls the HYPE-670.full.min.js file that gets the 404 but it calls a path that doesn’t actually exist on the server It seems odd to me that the path is an absolute one when the files it’s calling are actually in the same directory as the custom JS file calling it so a relative path would make more sense to me but I’m not a Javascript coder so maybe it has to be this way for some reason. To be fair I’m totally losing the plot now.

I also tried unloading all unnecessary Javascript on the page but that made no difference either.

Maybe also have a try switching it to an iframe embed for now. Also, have a look at the suggestion on the linked thread above. I am on the road today as it’s a holiday in Germany… as it’s not related to a default Oxygen / Hype installation, it will be something with your host or setup. Makes it a bit harder but we will get to the bottom of this.

Hi Max,

I just dropped a Wordpress on a spare domain I have - https://cartrade.co.uk - , with TLS certificate, Oxygen and the Hype plugin and uploaded the animation, dropped in the shortcode and it worked.

So to figure out what was causing the issue I’ll be gradually turning on the various security settings in the Plesk server and if one of those causes the issue I’ll see which one it is. If that checks out OK I’ll be dropping in the various plugins I have loaded on my main website because I figure it will be one or the other (a security setting or WP plugin) :slight_smile:
I’ll them tell everyone which other plugin I have found that doesn’t play well with Hype.

Thanks again :smiley:

Paul

2 Likes

I’m a bit late to the thread, but one small thing I noticed is that the 404 is on the HYPE-670.full.min.js runtime file. There’s a couple items to note about this if some caching is involved:

  • Hype 4.0.5 was recently released, so the file would have previously been called HYPE-664.full.min.js. *_hype_generated_script.js files are tied to this specific version, so if for some reason you uploaded that but not the runtime file it would result in this issue.

  • It is requesting the “full” runtime but perhaps a previous version/upload only had the thin version? If this all comes from an OAM file it would be interesting to unzip that and examine it.

1 Like

What are your values for WP_HOME and WP_SITEURL in your wordpress installations? These are WordPress Address (URL) and Site Address (URL) on the wp-admin/options-general.php page

Your page is looking for https://aztecinternet.com/branding/aztec-animated-logo.hyperesources/HYPE-670.full.min.js

But it should be looking in something like https://aztecinternet.com/wp-content/uploads/hype1/aztec-animated-logo.hyperesources/HYPE-670.full.min.js

You also have a caching plugin enabled, which is creating files like this: https://aztecinternet.com/wp-content/cache/asset-cleanup/js/item/6177119a7f1386206d7a71b911869d62-v7fe534513bfc1dc2b3c8baaf4928517956b64618.js

Most caching plugins (this one looks like W3 super cache) let you whitelist certain directories on your server. You can likely do that for /wp-content/uploads/hypeanimations/*

1 Like

I just had this issue and was able to get it resolved by manually adding the generated HTML files to the correct FTP location. I've been using the plugin for years, but on recent uploads using it on one of my sites, the animations were not appearing. Old animations were still working fine.

When inspecting the code in Chrome, I saw that it was looking for the .js file in a directory within wp-content/uploads/hypeanimations/#. When I checked that location, only the old animation files show up there. Nothing I posted recently with the plugin appears there. So I exported my project as HTML5 files and made a folder in the hypeanimations folder that corresponds to what the Chrome Inspector was looking for. It worked!

So not sure if this is pointing to the plugin or something on my WordPress site. Not using any caching or security plugins. I also checked the read-write settings of the uploads and hypeanimations folders and they are set for 755. Checked and reset the Permalinks. So, it's a mystery to me. Funny thing is my animation works fine on another WP site (with same theme) that I use the Hype plugin on. If I find a difference, I'll post it here, but just glad I have a solution.

That’s very strange that it is only broken on one of your sites. If you’re able to share your login information with me in a private message I can check this out.

I just discovered the issue in my case. It was due to my Media Settings in WordPress. I had an incorrect folder URL spec'd for uploads. Once I corrected that, the Hype files uploaded properly and appeared in the correct folder when I checked via FTP. I didn't discover the issue until I tried to upload an image to the Media Library and it came up blank. Problem fixed.

2 Likes