Resize your page when the problem is occurring and you’ll see the image reposition itself. Using Firebug I see that when resizing the viewport the main image (among other, related elements) gets a width assigned. I suppose the script is positioning everything by (re)calculating the image width. However, it is doing this before the image actually is done loading, and since you haven’t assigned any width attribute to the image (
<img src="…" width="500" …>
) that might be giving the browser a clue about the intrinsic dimensions of the image the script doesn’t know the width yet. The solution is, as said, to assign a width attribute to the image. If that’s not feasible, a workaround could be to call the resize event after the image has loaded.
Originally Posted by fireplace_tea
I haven't studied JQuery yet, but it looks like the programmer omitted a few semi-colons at the end of a few statements. For example, towards the top of the script:
Notice the first two .css lines are missing the semi-colon at the end and they happen to be the positioning commands. I would go into this script, put semi-colons at the end of the two above (and there are a couple of other places) and see if that doesn't resolve the issue. Again, I haven't studied JQuery yet, so you might need help from someone else if adding in the missing semi-colons doesn't work.
Yeah, you should study jQuery first because that code is totally correct (although not optimal in terms of efficiency). You could as well write it like so:
This is called “chaining” functions. But as said, that could be optimized to include every style in one
margin: '0 auto',