taken from http://forum.jquery.com/topic/jparallax-0-9-1-incompatible-with-jquery-1-4-2:

Any chance of adding this fix to the next update?

I downloaded the latest version from github and found that if I remove two instances of "console.log(b.mouseport);" from the jquery.jparallax.js and the jquery.jparallax.min.js files, the plugin will once again work in Firefox.

The "console.log" is used to print out information in Firebug, but if the browser addon is closed or doesn't exist, the script stops.

I hope that helps!

ul id="parallax"
  li id="parallax-1"
  li id="parallax-2"

ul id="parallax2"

$('#parallax>li').parallax({mouseport: $("#parallax"), yparallax:false});

This alone works perfect.

$('#parallax>li').parallax({mouseport: $("#parallax2"), yparallax:false});

This also works perfect. Parallax is now controlled by two viewports simultaneously.

Now to the interesting part:

$('#parallax>li').parallax({mouseport: $("#parallax"), yparallax:false}); $('#parallax').html('

This simply does not work. Replacing content of #parallax (to swap images) and reinitializing with same mouseport fails without any errors.

$('#parallax>li').parallax({mouseport: $("#parallax"), yparallax:false}); $('#parallax').html('

But surprisingly this works for second viewport.

So the problem is that new layers inserted into the same container fail to reinitialize with the same mouseport, but work fine with different one.

it barely moves on my iphone 3g ios4.1 and very sluggish on my samsung galaxy note which boasts a 1ghz processor.

are you guys having the same bad performance issue?

Great plugin! I have spent a day diving into using this plugin and I am having great fun. I understand that it is the width each element that determines how 'far', and therefor how 'fast' the layer must travel. However, setting the layers width so wide covers over all elements underneath that are to the left or right, blocking the mouse from being able to click the covered elements.

What I would like to do is be able to do it define each layers width and height to tightly bound the enclosed elements, and then assign a virtual value to define what the plugin is using as 'width'.

This would allow placing many small clickable elements on the stage, give each a virtual 'width' value to use for calculating the parallax position, while not covering over elements unless directly on-top.

Any thoughts?

Hi!

It seems that "handle" is deprecated and no longer used in Jquery 1.9. Hence it returns undefined in event.frame. As I have read, it is just an alias that has been removed.

Replacing it with dispatch will ensure compatibility with jQuery 1.9 (at least it is working for me)/

Line 101 of event.frame.js:

jQuery.event.handle.apply(this, arguments);

should now be

jQuery.event.dispatch.apply(this, arguments);

Thanks !

Hi,

I have a parallax setup to work on the parallax container not the body. If I apply a layer on top of the parallax container the parallax effect stops working.

This doesn't happen when you configure the parallax on the body.

Is there a workaround for this?

Thank you

First, Thank you. good plug in!! (Sorry, I am poor at english.)

Very useful.

But sometimes not worked.

When web page data not complete load (loading), mouse move. -> Just not worked !! (but worked when must once out of window, and again enter window mouse move.)

But mouse not move, while web page loading. When web page complete load and mouse move. => Just worked !!

in chrome, FF, IE.

So i add freeze code,

(function($){
$(document).ready(function(){ var $bg3 = $('#bg3'), $bgImg =$('#bgImg'), $bg2 = $('#bg2'), $bg1=$('#bg1');

         $(window).resize(function(){
            $bg1.css({'left':'0px','margin':'auto'});
            $bg2.css({'left':'0px','margin':'auto'});
            $bg3.css({'left':'0px','margin':'auto'});

$('.parallax-layer').trigger('freeze'); <-------------------freeze $('.parallax-layer').parallax({mouseport: $('html,body'),yparallax:false,xparallax:'70%',frameDuration:10}); <-------------------move $('.parallax-layer').trigger('unfreeze'); <-------------------unfreeze }).resize(); }); //ready function moveBg(){ $('.parallax-layer').trigger('unfreeze'); } window.onload = moveBg;
})(window.jQuery);

Result, chrome, FF worked. But IE is not worked.

example site : http://werty.co.kr/blog/

Hey @stephband

Do you happen to have copies of the images you had here: http://webdev.stephband.info/jparallax/images/parallax_button/*.png ? The library you've written is amazing and we need to ensure that people see the great work you've done but right now I'm assuming you're upgrading your web site, which is why the examples are all borked.

Could the images be uploaded to a free image hosting service? or even just on flickr? Let me know when the old assets have been uploaded and I can land a patch for you.

Cheers, Jaime

Hello, first thank you for your amazing job here. got a little issue with Firefox significantly slowing down the parallax effect. Works fine on Chrome and IE.

Maybe it has nothing to do with that, but It seems like FF fails to calculate accurately the css top, left and margins compared to the other browsers. Random line on Chrome :

First, Thank you. good plug in!! (Sorry, I am poor at english.)

Very useful.

But sometimes not worked.

When web page data not complete load (loading), mouse move. -> Just not worked !! (but worked when must once out of window, and again enter window mouse move.)

But mouse not move, while web page loading. When web page complete load and mouse move. => Just worked !!

in chrome, FF, IE.

So i add freeze code,

(function($){
$(document).ready(function(){ var $bg3 = $('#bg3'), $bgImg =$('#bgImg'), $bg2 = $('#bg2'), $bg1=$('#bg1');

         $(window).resize(function(){
            $bg1.css({'left':'0px','margin':'auto'});
            $bg2.css({'left':'0px','margin':'auto'});
            $bg3.css({'left':'0px','margin':'auto'});

$('.parallax-layer').trigger('freeze'); <-------------------freeze $('.parallax-layer').parallax({mouseport: $('html,body'),yparallax:false,xparallax:'70%',frameDuration:10}); <-------------------move $('.parallax-layer').trigger('unfreeze'); <-------------------unfreeze }).resize(); }); //ready function moveBg(){ $('.parallax-layer').trigger('unfreeze'); } window.onload = moveBg;

})(window.jQuery);

Result, chrome, FF worked. But IE is not worked.

example site : http://werty.co.kr/blog/

Whenever I attempt to resize the browser window the images and everything resize accordingly but the distance the layers travel doesn't seem to update so it slides the images beyond the target showing my nasty background color.

http://184.71.75.30:3000/photomonkey/ (Full site; will make a demo later)

Hi, I download this plugin from and First time I use this file with the latest version of jQuery. But I saw it not working. Then I use the non compressed version(jquery.parallax.js) this work fine with latest version of jQuery. Then I compressed the jquery.parallax.js file and I use the code which compressed by me. That time it work. It means that here it a problem in the current compressed file(jquery.parallax.min.js).

So I request you to change the file. I change the code with the code which compressed by me.

Thank you.

Hello! Thanks for the plugin! But I found an error. After updating the content with Ajax, the Y axis is ignored, that is, margin-top does not change its value. How can I fix this?

Thank you

$(this).find("img").parallax({ xparallax: '55px', yparallax: '50px', mouseport: $(this).parent() }, { xparallax: '80px', yparallax: '84px', mouseport: $(this).parent() });

Currently a work in progress; still needs a proper initialization on load. Possibly as a configuration parameter, since naturally you cannot hover over anything with a touch device, but you can swipe. Only works currently if you tap first on the viewport and then swipe around. The touch emulates a mouseenter event. The idea then would probably be to trigger a mouseenter event on any of the touch events in case it hasn't already been triggered.

Currently how I'm doing this outside of this library is with Modernizr, simply looking for a touch class and then initializing it on page load:

if ($('html').hasClass('touch')) viewport.mouseenter();

Again a better solution here would be to wait first for some interaction, since as a plugin, it needs to be concerned only about it self and not initialize due to changes in global state (i.e. page load).

Would be nice to add compatibility for touch devices.

This issue is just a placeholder until I can submit a real PR for a reasonably solid proof of concept (stable enough for me to push to production at least).

Decay resets to 0 when mouse stays inside of the mouseport. After leaving the mouseport, decay switches back to desired value on entering the mouseport again.