Bad start position

[carpabg]

The start position of the imageholder is above the correct position, when start scrolling it takes the correct value, this problem is happening only in safari browser and if I try the demo works fine, but if I copy the demo code, including the files to my localhost the problem starts.

[pederan]

Then it's clearly something you do different locally. Do you load the javascript after the css and html (right before body end tag / dom loaded)?

[carpabg]

I tried both and I get same result. Now I've noticed that when I reload the page, the error happens, but if I enter again to the page by pressing enter key in the URL bar works correct.

I solve the problem in ugly way but works:
window.setTimeout( function() { $( '.img-holder' ).imageScroll( 'refresh' ); }, 0 )

If I put the refresh method outside of the setTimeout, doesn't work despite it's inside ready JQuery method.

[pederan]

That should not be necessary. Can you send me a demo url and I will help you?

[carpabg]

http://agrotenda.com/naranjas

Thanks

[pederan]

Hi

I have looked at your code now, and without fully understand all what your code does, I am almost 100% certain it's because of the code after you initialize the parallax code. My code will calculate the position and size based on the sceen size and the size of other dom elements. If you change any element with js/jquery after the plugin has been initialized you need to run the refresh function (that's why I have created it).

So the solution is to put the code for the parallax after all other dom manipulating code has run. The setTimeout function you have used actually does that (even though you set the delay to 0).

[carpabg]

I've debugged a little bit, thinking about what you said, and I found the problem. It seems that the logo image loads after the js execution, and as it hasn't define any height because is relative to the image the omg-holder position is changed after img load.

if you know any trick to prevent it without the timeout, tell me it please.

Thanks for your help

[pederan]

You should use "the padding trick" for your responsive images: http://andyshora.com/css-image-container-padding-hack.html. Then the image container will take up the amount needed before the image has loaded.

And you should also start to put your script tags after dom content (just before </body>) to prevent the loading of javascripts from blocking dom render.