Grow your CSS skills. Land your dream job.

Getting three scripts to work on one page. possible??

  • # March 14, 2013 at 12:16 pm

    Hi! I am new to web design. I finished classes at the end of 2012. I posted a question a few weeks ago. But I got sick and could not follow up. I see that it has been marked as solved- SO, I am posting again.

    I am in the process of putting a site together and I am finding that my javascripts will not play nice with one another. I want to add too many jquery scripts and they conflict.

    Here is what I am using: ParallaxContentSlider (http://tympanus.net/Development/ParallaxContentSlider/) The Facebook Wall (http://tutorialzine.com/2011/03/custom-facebook-wall-jquery-graph/) And the Sticky Bar Footer (http://www.dynamicdrive.com/dynamicindex17/stickybar.htm) — AND the person who I am working with would like me to add another slideshow!!

    Now, I have the parallax slider in place and working. When I add the footer, it just does not work. When I add the facebook wall, the information in the parallax slider disappears. (my facebook wall and footer are not styled, yet)

    What do I do??? Any help you can offer would be a BIG HELP! Thanks.

    Now, since then….. I followed advice to put all the scripts at the bottom of the page and limit my calls for jquery to one.
    I did this and the page is looking rough- and none of the scripts are working.
    http://crossfitchoice.com/choicewireframe.html

    Is it salvageable? Is there a way to get it to work?

    Thanks

    # March 14, 2013 at 12:31 pm

    Right now your main issue is that all of your script tags are wrapped in an ““. Move them out of there. Your script tags should be the last thing before your closing body tag.

    # March 14, 2013 at 4:39 pm

    I think I have fixed that issue… by closing the tag.

    All the scripts are down at the end of the page before the tag.

    # March 14, 2013 at 5:35 pm

    Great. That looks better. Now put your jQuery template scripts back into the content, wherever you want them rendered, leaving the other scripts in the same order.

    # March 14, 2013 at 6:19 pm

    Okay. I tried to do what you said. I am not sure if I moved too many of the scripts. But, I took what appeared to be the templates and placed them at the correct div.
    What next?

    # March 15, 2013 at 6:47 am

    I have not tested but try these
    1. try to use only one jquery library
    2. remove other jquery and see if individual works or not
    3. if they works fine
    4. try to put two jqueries together and see if they works or not,if they works then fine if not…they are conflicted
    5. here is way to remove conflict

    # March 15, 2013 at 6:56 am

    last thing dont forget to put jquery library at the top of all js files in your case put

    at top

    # March 15, 2013 at 2:43 pm

    thank you for all your help. I guess I just need more training before I attempt a project like this. I am just really confused with all of this.

    On top of that, I have all these files that I have tried with the page that are still lingering in attachment (even though I have removed the link from the page).

    At least when I started it had one working element.

    Any good tutorials out there on making more than one jquery work on a page???

    I am so LOST it is not funny— and kinda sad.

    When I , first, put the page together, it went smooth and looked great— until I tried to add the last two features. then I took things out of place and tried what I was told…. and I cant get one thing to work and NOW I have no clue what I am doing.

    Super frustrated.

    # March 17, 2013 at 5:15 am

    try upload the file and disturbed it may be someone can help includeing me

    # March 17, 2013 at 10:53 pm

    the file is uploaded and posted at http://crossfitchoice.com/choicewireframe.html
    If you can help– that would be GREAT.

    # March 17, 2013 at 11:43 pm

    Are you familiar with Chrome’s Developer Tools? Or Firebug? I think these would help you a lot. Your jQuery scripts broke because jQuery isn’t defined. You’re loading your scripts in the wrong order. You have to load jQuery before you load any of the plugins it depends on. If you’re calling jQuery functions in the body of your page, make sure jQuery is loaded before you call those functions. Move

    to the top of the page, or move all your other script calls after your jQuery call. Also check out [this snippet](http://css-tricks.com/snippets/jquery/fallback-for-cdn-hosted-jquery/ “This Snippet”) for a really good idea to make sure your page doesn’t break if your CDN fails. If your’re concerned about page load speed, you could also load your scripts asynchronously via something like Yepnope (included with modernizr), but I don’t really think that’s necessary at this stage.

    # March 17, 2013 at 11:44 pm

    … my code snippet broke, I was saying that you should move your reference to the jQuery CDN to the top of the page.

    # March 19, 2013 at 10:33 pm

    thanks, I will try that….

    # March 20, 2013 at 11:06 am

    Okay, I attempted to do what you suggested. I added the code snippet to the head of the page. But it is all not working. when I load I (now ) get 7 errors or things that are not loading. I am not sure what is going on.

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".