Getting jscript to work

JavaScript
1

Hi

I’m trying to get these dandelions to work ( move ) so I have added the following code but nothing. Have I got everything in the right place?

 <link rel="stylesheet" type="text/css" href="css/dandelion.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	<script src="js/easing.js" type="text/javascript"></script>
	<script src="js/jquery.BGParallax.js" type="text/javascript"></script>

<script>
	
	$.BGP({
		
		backImage: "images/dandelion.png",
		midImage: "images/dandelionmid.png",
		foreImage: "images/dandelionmid.png",
		backX: "-100000px",
        backY: "-10000px",
		midY: "-100000px",
        midX: "0px",
		foreY: "100000px",
        foreX: "0px",
		backTime: 10000000,
		midTime:  10000000,
		foreTime: 5000000,
		backEase: '',
		midEase: '',
		foreEase: '',
		slideShow: false,
		
		});
	
	
	</script>

website is: http://79.170.40.244/healthmeanswealth.co.uk/

2

Hi hantaah,

I visited your site and noticed that several files are not being loaded:
GET http://79.170.40.244/healthmeanswealth.co.uk/js/easing.js 404 (Not Found) /healthmeanswealth.co.uk/:25
GET http://79.170.40.244/healthmeanswealth.co.uk/css/dandelion.css 404 (Not Found) /healthmeanswealth.co.uk/:24
GET http://79.170.40.244/healthmeanswealth.co.uk/js/jquery.BGParallax.js 404 (Not Found)

You can check for errors like this by opening the console in your browser (Ctrl+Shift+J in Chrome, Ctrl+Shift+K (I think) in Firefox, and F12 in IE).

3

ahh I see. What would be the reason for it not being found?

4

Well, the most likely reason would be that the files are not there - check in your /js folder to see if you have the file jquery.BGParallax.js - it looks like you’re using wordpress, so it’s possible that the files are in your theme directory.

5

I checked the files and all seem to be in the correct place. Checking out the console in inspect element it says " failed to load resource " for:

http://79.170.40.244/healthmeanswealth.co.uk/js/easing.js ( I checked it’s in js file )
http://79.170.40.244/healthmeanswealth.co.uk/css/dandelion.css ( I checked it’s in css file )
http://79.170.40.244/healthmeanswealth.co.uk/css/dandelion.css ( same file )

Does this mean I plced the links in an incorrect possition in header as I’m a little confused about where to put it all amongst all the php? Or is it something else do you think?

6

OK, it’s like I thought, the problem is that the files are in your theme folder - if you try this link: http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/css/dandelion.css it works.

What you need to do is just change the links in your template a little - they should look something like this:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/easing.js"></script>

for the JS, and

<link href="<?php bloginfo('template_url'); ?>/css/dandelion.css" rel='stylesheet' type='text/css' />

for the CSS.

7

orrr right now I see. I’ve used full url in the past but I thought it would work so long as I get the folders and urls correct, so now I see!

So I did that but it’s still not working. I placed the full url in for the images like this: http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandelion.png

I checked the images are thete by putting that in the browser and they come up.
The errors have gone though in the console area, it’s just still no animation.

8

You’ve got some javascript in the page that initialises the parallax plugin… try changing it to the following:

$(document).ready(function() {
    $.BGP({
        backImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandelion.png",
        midImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandelionmid.png",
        foreImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandilionmid.png",
        backX: "-100000px",
        backY: "-10000px",
        midY: "-100000px",
        midX: "0px",
        foreY: "100000px",
        foreX: "0px",
        backTime: 10000000,
        midTime:  10000000,
        foreTime: 5000000,
        backEase: '',
        midEase: '',
        foreEase: '',
        slideShow: false,
    });
});

This should make sure that the JS isn’t run until the document is ready.

9

is that the jquery.BGParallax.js?

I edited that like the code above but still no animation :cry:

10

OK, spotted a couple more things that need changing…

Firstly, you need to make sure you include these three divs in the page:


<div id="back"></div>
<div id="midground"></div>
<div id="foreground"></div>

I’d put them right after the opening <body> tag.

Secondly, you need to make sure you have these CSS rules somewhere (if you haven’t already):

html {
    overflow-y: scroll;
    min-height:100%;
}

#back {
    background-repeat:repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
#midground {
    background-repeat:repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}
#foreground {
    background-repeat:repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

and lastly, there is a spelling mistake in that JS code I posted previously:

foreImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandilionmid.png",

should be:

foreImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandelionmid.png",
11

oh yea of course the html!

Ok done that but ahhhh no animation :'(((

12

No, not that file… in your html, about 2/3 of the way down.

13

yea that’s what I already had in my <head> just before </head>, I didn’t need to edit that it was already like the code you posted above

there is same code in the jquery.BGParallax.js file so I changed that to be the same as what is in my <head> is that right?

otherwise are we stuck? To know what’s wrong?

14

I’ve just looked at the source code of your site, you’ve changed the spelling mistake, but you’re still missing some important JS. Your code still says this:

<script>
	
	$.BGP({
		
		backImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandelion.png",
		midImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandelionmid.png",
		foreImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandelionmid.png",
		backX: "-100000px",
                backY: "-10000px",
		midY: "-100000px",
        	midX: "0px",
		foreY: "100000px",
        	foreX: "0px",
		backTime: 10000000,
		midTime:  10000000,
		foreTime: 5000000,
		backEase: '',
		midEase: '',
		foreEase: '',
		slideShow: false,
		
		});
	
	
	</script>

it should say this:

<script>
$(document).ready(function() {
	$.BGP({
		
		backImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandelion.png",
		midImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandelionmid.png",
		foreImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandelionmid.png",
		backX: "-100000px",
        	backY: "-10000px",
		midY: "-100000px",
        	midX: "0px",
		foreY: "100000px",
        	foreX: "0px",
		backTime: 10000000,
		midTime:  10000000,
		foreTime: 5000000,
		backEase: '',
		midEase: '',
		foreEase: '',
		slideShow: false,
		
		});
});
	
	</script>

Wrapping the code in $(document).ready(function() { .. }) is important to ensure that the browser doesn’t try to execute it until the page is ready. I get an error msg in the console in Chrome which says Uncaught TypeError: Object function (e,t){return new v.fn.init(e,t,n)} has no method 'BGP' and it points to this code… so this is being run before the plugin has loaded which is what we need to prevent.

15

I wondered what that error was… Ok so I changed it now to the code above but it’s still not working

sorry to be such a pain!

16

haha, it’s no problem :slight_smile:

You’ve missed a bit off the code we were just talking about… there should be an extra }); at the end.

17

I thought that was me making a copy and past mistake.

Did that but it’s still not working…Only made the picture show above everything. I might cry

18

Do you have any docs for this plugin that you’re using, or is there a website where I can see it in action?

19

yea sure how can I send you the full file?

20

Great news!!! It’s working, I moved the links to the bottom of most the php, not sure if that was it but hey it’s working now :slight_smile:

Now I just have to play around with it till it moves good

Many thanks