Spot the Differences - black screen in Wordpress
Miz Cozma March 27th, 2016

Hi there

 

So love your app and the tutorials are great!!!

 

I did the spot tutorial - to make a few games for a non  for profit site - I know they will love them

 

After the tutorial it played great in the app

 

But soon as I loaded it into a word press page - via a iframe..

then the issues started.

 

First I had an error that it wouldn't load the app script

 

I sorted that out and registered the js and css in my functions file..

 

I read all around the web and still can't get it to load anything but a black screen...

 

Even just pulling up the page  shows all black

 

http://www.sikhfoundation.org/wp-content/uploads/corner/play/Spot/html5-Spot/Vaisakhi-spot1/index.html

 

in the post I am trying to do - this is how I call it

 

<div style="background-color: #9CBD08; width: 100%; height: 500px;">
<iframe src="http://www.sikhfoundation.org/wp-content/uploads/corner/play/Spot/html5-Spot/Vaisakhi-spot1/index.html" width="900" height="600"></iframe>
 </div> 

 

 

I am attaching the zip file and really hope someone can help - I couldn't find anything about wordpress on this site 

 

Thanks!

[attachment=91:Vaisakhi-spot1.zip]

 

 

ummm found this in the chrome consule

 

wade.js:51 The deviceorientation event is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
wade.js:51 The devicemotion event is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
wade.js:107 'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead.
index.html:1 XMLHttpRequest cannot load http://sikhfoundation.org/wp-content/uploads/corner/play/Spot/html5-Spot/Vaisakhi-spot1/scene1.wsc. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.sikhfoundation.org' is therefore not allowed access.
wade.js:341 Unable to load json file http://sikhfoundation.org/wp-content/uploads/corner/play/Spot/html5-Spot/Vaisakhi-spot1/scene1.wsc
 
 
and this is what firefox says 
 
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery-2.0.3.min.js:1:0
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. jquery-2.0.3.min.js:5:12747
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://sikhfoundation.org/wp-content/uploads/corner/play/Spot/html5-Spot/Vaisakhi-spot1/scene1.wsc. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
 
I used this link  for both 
 
does that give some help figuring it out?
 
 
All 4 Comments
Gio March 27th, 2016

Hi

 

I had a quick look, and it looks like there is more than one problem.

 

First of all, using absolute paths (starting with a / ) for your scripts doesn't seem to be working. In your index.html you have:

    <script src="/jquery-2.0.3.min.js"></script>    <script src="/wade.js"></script>

It should be without the /

    <script src="jquery-2.0.3.min.js"></script>    <script src="wade.js"></script>

Secondly, from what you posted above, it seems that your server on sikhfoundation.org is not setting CORS headers correctly. Basically this means that if you are requesting files on domain X from domain Y, your server on domain X must be set up to accept cross-origin requests.

 

How you do this depends on the type of server it is. This is a good summary that covers most server types.

Miz Cozma March 27th, 2016

Hi there

 

thanks for the quick response.

 

I got rid of the /  not sure why I kept them - I had tried full paths then changed when I put all js in the same directory.. missed a couple / I guess

 

Didn't help though.

 

I have put though a ticket to my server people.   What exactly is the app trying to access away from our site. I thought everything was included in the source I downloaded after making the game?

 

Knowing that might help my server people decided if they will allow it if it is blocking!

 

Thanks!

Gio March 27th, 2016

Removing the / did fix some problems, so if you go to the site directly it's getting a bit further now. There's a different error now in the console:

 

Unable to load script behaviours/fade.js

 

In fact it looks like that file is not there, if you go to the file URL directly it's a 404 error.

 

To answer your question yes, when you click "Download Source" you get a zip that contains everything you need. If fade.js was in your project, it should have been in the zip too.

Miz Cozma March 27th, 2016

Whoohoo !!!  for some reason when I loaded the behaviours folder - it came in with an _behaviours

soon as I removed that - it works!!!!  I tested across many browsers and all good! Now just to tweak it a bit and yay!!

 

Thank you so much! My boss is going to love this!

 

Thanks again and Happy Easter

Post a reply
Add Attachment
Submit Reply
Login to Reply