Can't see the animation after updating the file and code


(Phil Smith) #1

Hi there,

I’ve done a search and can’t find my problem. I’ve created an animation and exported it. I’ve uploaded the HTML file and Hypersources folder to my WPcontent/uploads/2016/08 folder as instructed.

When I past the code into my web editor the div is there but displays nothing, it also asks for a username and password.

Here’s the code I’ve pasted:

<div id="lotteryanimation5_hype_container" style="margin:2px;position:relative;width:760px;overflow:hidden;" aria-live="polite"> <script type="text/javascript" charset="utf-8" src="ftp://ftp.ashgatelottery.org.uk/wp-content/uploads/2016/08/Lottery%20animation%205/Lottery%20animation%205.hyperesources"></script> </div>

Any ideas welcome.


(Phil Smith) #2

Here’s the site that I’m working on: http://ashgatelottery.org.uk/


(DaveJohnson) #3

Is it possible this happens because of Wordpress? What happens when you type your Wordpress username/password in? I’m not enough of a programming guru to diagnose much beyond here, but I’m wondering if it loads when you enter that info - it might indicate you need to change a setting elsewhere in Wordpress?


(Phil Smith) #4

Cheers for the reply Dave, I enter the password and still no display so I’m fairly sure I’ve messed up the code somewhere, I’ve been away from web design for 6 years and seem to have forgotten most of it!


#5

Hi Phil!

I’m not a Wordpress guy - but in my readings on this Forum about problems with Wordpress that have the “nothing shows” issue, often the cause is the “height” is not set for the container. I noticed in the code for your “div” there was not a height set.

This following thread offers many insights. The post quoted here (@daniel) was marked as a solution. Perhaps the info in this thread will help You out:


(Phil Smith) #6

Thanks for that Jim, I’ve tried the height thing and still no good. The log in problem was the ftp reference on the start of the src code. Still didn’y display so I’ve just put an animated gif in instead for now. Not great but it’ll do until I figure out how to use HTML5


(Mark Hunte) #7

Sorry I should have mentioned when I first opened the link you supplied I got an alert by me system that the page wanted to connect to an FTP. I did think it may be why you would get a login prompt. But once I denied it I did not get the prompt so was not able to test that thought further…


(Phil Smith) #8

Hi Mark, yes that was a problem. In the the src link it was pointing towards ftp whicjh promted the log in. I replaced that with http and the log in was sorted but I still had no animation displaying.


(Mark Hunte) #9

It probably because you are pointing at the resource folder, which is a directory not a file.

point at the src at .js file in the resource folder you exported.

http://ashgatelottery.org.uk/wp-content/uploads/2016/08/Lottery%20animation%205/Lottery%20animation%205.hyperesources/lotteryanimation5_hype_generated_script.js


<div id="lotteryanimation5_hype_container" style="margin:2px;position:relative;width:760px;overflow:hidden;" aria-live="polite">
<script type="text/javascript" charset="utf-8" src="http://ashgatelottery.org.uk/wp-content/uploads/2016/08/Lottery%20animation%205/Lottery%20animation%205.hyperesources/lotteryanimation5_hype_generated_script.js"></script>
</div>

(Phil Smith) #10

Excellent! that’s working now Mark. Many thanks :slight_smile:


(Phil Smith) #11

Ok, after having resolved this issue, annoyingly the animation has disappeared again after I updated the file to try and get it to repeat play.

Here is the new code I’ve inputed:

<div id="lotteryanimation1_hype_container" style="margin:auto;position:relative;width:760px;height:380px;overflow:hidden;float: right" aria-live="polite"> <script type="text/javascript" charset="utf-8" src="http://ashgatelottery.org.uk//public_html/wp-content/uploads/2016/09/Lottery%20animation%201.hyperesources/lotteryanimation1_hype_generated_script.js"></script> </div>indent preformatted text by 4 spaces


(Phil Smith) #12

Just fixed this, I left in the public_html part. Once removed. the animation was present and correct :slight_smile: