SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    getting jscript to work

    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?

    Code:
     <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. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi hantaah,

    I visited your site and noticed that several files are not being loaded:
    GET http://79.170.40.244/healthmeansweal...k/js/easing.js 404 (Not Found) /healthmeanswealth.co.uk/:25
    GET http://79.170.40.244/healthmeansweal.../dandelion.css 404 (Not Found) /healthmeanswealth.co.uk/:24
    GET http://79.170.40.244/healthmeansweal....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. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ahh I see. What would be the reason for it not being found?

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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/healthmeansweal...k/js/easing.js ( I checked it's in js file )
    http://79.170.40.244/healthmeansweal.../dandelion.css ( I checked it's in css file )
    http://79.170.40.244/healthmeansweal.../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. #6
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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/healthmeansweal.../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:
    HTML Code:
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/easing.js"></script>
    for the JS, and
    HTML Code:
    <link href="<?php bloginfo('template_url'); ?>/css/dandelion.css" rel='stylesheet' type='text/css' />
    for the CSS.

  7. #7
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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/healthmeansweal.../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. #8
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    You've got some javascript in the page that initialises the parallax plugin.. try changing it to the following:
    Code JavaScript:
    $(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. #9
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    is that the jquery.BGParallax.js?

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

  10. #10
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    OK, spotted a couple more things that need changing..

    Firstly, you need to make sure you include these three divs in the page:
    HTML Code:
    <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):
    Code CSS:
    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:
    Code JavaScript:
    foreImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandilionmid.png",
    should be:
    Code JavaScript:
    foreImage: "http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/images/dandelionmid.png",

  11. #11
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh yea of course the html!

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

  12. #12
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by hantaah View Post
    is that the jquery.BGParallax.js?

    I edited that like the code above but still no animation :'(
    No, not that file.. in your html, about 2/3 of the way down.

  13. #13
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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:
    Code HTML4Strict:
    <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:
    Code HTML4Strict:
    <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. #15
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #16
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by hantaah View Post
    sorry to be such a pain!
    haha, it's no problem

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

  17. #17
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #18
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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. #19
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    yea sure how can I send you the full file?

  20. #20
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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

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

    Many thanks

  21. #21
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    OK, had a brainwave.. seems like we've got multiple versions of jQuery being loaded, which is probably not helping.

    So, can you remove these lines from the head of your html:
    HTML Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/js/easing.js"></script>
    And move this one:
    HTML Code:
    <script src="http://79.170.40.244/healthmeanswealth.co.uk/wp-content/themes/Avada/js/jquery.BGParallax.js" type="text/javascript"></script>
    right before the closing </body> tag, and move this block:
    HTML Code:
    <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>
    immediately after it.

    Edit: Just seen your last message - great stuff! What I said about removing the first two linked JS files still stands though, as wordpress is loading it's own versions near the bottom of the page anyway.

  22. #22
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    yep, all working! I'm very greatful thankyou, just tryin to get it all behind the content now, I think it's ro do with the z-index and also change the direction and clean it up a little. I'll let you know when it's finished so you can see.

    thanks again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •