3d viewport jquery problem when duplicated

Question

The problem only still excists in FF and Chrome. Hughes fixed it for IE

I am currently working on a website where i use a Parallax effect to fake a 3D effect. The script that i am using is smart3d (jQuery plugin).

The first slide that i made works fine (allthough the 100% width isnt actually 100% for some reason). If i duplicate it it shifts more to the right side when hovering. if i duplicate it again... it shifts even more.

I cannot find what the problem is so i decided to ask you guys for help. You can view the problem here: http://basenharald.nl/3d/

I put the borders on the several LI items on so it becomes clearer what i mean.

hope you guys can help.

BTW: i get the same problem when i use px instead of % so that is not the answer.

Answer 1

This is a bug in smart3d. It correctly adjusts for vertical scrolling, however it does not account for horizontal scrolling. I've found the relevant code, and here are instructions for how you can fix it.

Open up the file jquery.smart3d.js, and around line 69 you will find where we bind the mousemove function to the smart3d container:

thisObj.mousemove(function(e){
    if (settings['horizontal']) {
        var x = e.clientX - thisObj.offset().left;
        ...

What we need to do is account for horizontal scroll, just as it already does for the vertical scroll. Change the function to read:

thisObj.mousemove(function(e){
    if (settings['horizontal']) {
        var st = $('html').scrollLeft();
        var x = e.clientX - thisObj.offset().left + st;
        ...

Save the file and reload your page.

This should fix your problem, since it's the same way the script handles vertical offset. I haven't tried it myself though!