i found a free script online that would scale my image in a div based on the size of a users browser windows.
which is great. but the image always seems to ‘jump’ on load. (as my image is big to cover for larger res’s)… is there a way to avoid the unsightly jump?
see a preview here:
thanks!
ps. any code additions to fix this, or alt script recommendations would be super useful
The link seems to have taken a walk. Could you post it again? It’s likely that you could just use CSS for this. The jump may be the time it takes the JS to kick in.
i’ve got the fluid images script working great in chrome (test on page load, an resizing window)… but just doesn’t work in firefox. in firefox the image loads HUGE, and there’s no image resizing when the window is resized either.
any ideas how i can get it working in firefox just like it does in chrome???
am really new to coding. and is all based off tutorials i found online.
The jump occurs, because the script has to work out the dimensions of the viewport before centering the image.
The easiest way to avoid this, is to set the image’s display propety to none in the css.
The you can alter the display property to block via javascript, once the image has loaded.
I’m away from the PC at the moment, but I could make you a demo of this later on if you would like.
What I’ve done is to add a line of JavaScript directly after the jQuery include, which hides the image.
Then it is not until the center() function has positioned the image correctly that I use JavaScript to set the display property to block.
I used JS to do this, so that anyone who has it turned off, will still see the image.
Anyway, this should hopefully avoid the jumping effect.
thanks so much!!! for some reason this latest one didn’t work - but as you explained it, i copied the hide scrip into the old one you sent, and now it works fine.
BUT when i put in all my like buttons and my little nav, i still get the same jumping image problem.
any idea why and how to resolve? thanks again for all your help http://www.slapadrone.com/test3.php
i.e the image should exist on the page before the JavaScript attempts to hide it.
You will then want to keep the line this.css("display", "block"); in the center() function.
The reason why you’re experiencing a jump on the page load is that you have included some third-party widgets (Twiiter and FB).
The chances are that these are holding everything else up.
If you try the above and it still doesn’t work for you, you could always go the evil route of setting the image’s display property to zero in the CSS, then reverting it in the JavaScript.