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
    549
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    5 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
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ahh I see. What would be the reason for it not being found?

  4. #4
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    5 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
    549
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    5 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
    549
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    5 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
    549
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    5 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
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh yea of course the html!

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

  12. #12
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    5 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
    549
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    5 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
    549
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    5 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
    549
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    5 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
    549
    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
    549
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,256
    Mentioned
    32 Post(s)
    Tagged
    5 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
    549
    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
  •