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.

but one thing though is that as the image loads, it loads on the right side, then 'jumps' into position after the full image has loaded. is there any way to avoid that jumping of the image.

perhaps it can load in the right position, in the center as it loads?

`html

`

This works in all of the major browsers, down to and including IE8.

I would find it interesting if anyone could show me how to implement the same thing using just CSS.

Pullo
—
2013-04-06T15:30:12Z —
#6

Hi,

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.

hellofromlondon
—
2013-04-06T15:32:23Z —
#7

would love if you could help with any direction. am new to much of this.

thanks so much. really appreciate it

and any notes to help me understand what's going on would be great too, so can learn on it.

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.

hellofromlondon
—
2013-04-07T14:06:18Z —
#10

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.

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.