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

[awagner87]

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

[TheDoc]

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

[awagner87]

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.

[TheDoc]

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?

[awagner87]

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!

[TheDoc]

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).

[mmoustafa]

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.

[awagner87]

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!!

[mmoustafa]

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.

[awagner87]

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?

[mmoustafa]

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.

[Author]

Posts