Grow your CSS skills. Land your dream job.

using jQuery: using versions 1.6.4 and 1.6.2 together in one html page

  • # October 30, 2012 at 2:31 pm

    Hello, I’m very new to query and javascript. I use these scripts in my pages a lot, I really don’t change anything though. However I need to use both these scripts for the jquery effects I’m trying to implement on my page. For some reason, when I have both on my page that look like this:


    They seem to “cancel” out the other effect on my page… Not sure what to do? Can I make it so it only effects the style or class that I want it to? Any suggestions? Ideas? Anything would be great and I’d really appreciate it! I’ve been pulling out my hair trying to figure out how to get these effects working together. THANKS!!

    Amanda

    # October 30, 2012 at 2:33 pm

    Is there something wrong with only including one? Use the 1.6.4 version.

    # October 30, 2012 at 2:35 pm

    I tried… the other parallax effect doesn’t work then. I need both versions to make both types of parallax effects work on my page.

    # October 30, 2012 at 3:31 pm

    Hmmmmm, something relying on a super specific version of jQuery sounds wrong to me. Do you have a link? If you only include 1.6.4 what type of errors show?

    # October 30, 2012 at 4:33 pm

    http://www.kreebils.com/index-test-header.html

    It is still in progress, trying to get functionality done first, here the parallax scroll and navigation functions, however the parallax intro/header isn’t functioning with the movement of the mouse.

    http://www.kreebils.com/index-test-header-scroll.html
    Here, the header functions but the navigation and parallax scroll doesn’t. HELP! Its making me crazy and the only thing I can find is that jQuery version issue…

    Hope you can help? THANKS SOO MUCH!

    # October 30, 2012 at 4:54 pm

    In your 2nd link, you are including jQuery *after* the other plugins. Make sure to always load jQuery first (and preferably near the bottom of your document).

    # October 30, 2012 at 5:03 pm

    You could put the mouse-parallax header (link 2) inside an **iframe** in the page with scroll working correctly (link 1).
    Where the iframe page runs jQuery 1.6.2 and the parent runs 1.6.4.

    Although it’s a solution, It’s really non-intuitive.
    I hope someone could find some other solution.

    # October 31, 2012 at 8:26 am

    I’m going to give the iframe a try, I’ve never worked with iframes before, could you give me an example of what youre talking about or a link to a tutorial? Thank you!!

    # October 31, 2012 at 10:15 am

    You could add this

    **_< iframe style="width:100%; height:700px; overflow:hidden; background:#FFF;" src="http://www.kreebils.com/index-test-header-scroll.html">_**

    instead of the h1 tag in (link 1) using chrome’s developer tools to see how it works.

    Just remove all the extra things in the iframe page (link 2) and set **_body{ overflow:hidden; }_** to prevent the scrollbars from appearing.

    Remove the space in the iframe tag though, markdown is having some trouble escaping the code.

    # October 31, 2012 at 10:47 am

    Thank you sooo much for your help! It worked! I just need to make the file size of the PNG images smaller to cut back on loading time. I would have never thought to do that! AWESOME! Do you have a blog?

    # October 31, 2012 at 11:25 am

    Nope, working on it http://mmoustafa.com give it a week or two. I am active on [Codepen](http://codepen.io/mmoustafa “mmoustafa’s codepen”) anyways.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

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