You might be running into this problem:
http://michael.futreal.com/jquery/readyvsload
mattv wrote:
>
> hello all,
>
> i've dabbled some in javascript and jquery over the past few months, and
> while i'm still pretty new at this, i've really enjoyed using the library
> so far.
>
> i'm working on a site that will have images of varying widths that i'm
> trying to center horizontally in a div. i'm also applying a drop shadow
> using jquery (thanks, tutorial section!) to the images. the css necessary
> to add the drop shadow has been killing the css that i would usually use
> to center the image. so i decided it would be fun to try to get jquery to
> help get the job done.
>
> my original thought was that if i could use jquery to get the width of the
> image, i could use that value to determine the positioning or margins i
> could use for each image to get it to center.
>
> for example, subtracting the image width from the width of the container
> div and dividing by two would give me the amount that the image would need
> to be absolutely positioned left or right to have it appear centered.
>
> here is the short script that i've drawn up to accomplish that task (797
> is the width of the container div):
>
> $(document).ready(function(){
> var imgwidth = $("img.dropshadow").width();
> var centermargin = (797-imgwidth)/2;
> $("#image").css("left",centermargin);
> });
>
> this does work, but only some of the time. i've discovered that the first
> time the script runs (before anything on the page is cached), the
> calculation occurs as if imgwidth = 0. when i look at the generated
> source using the web developer toolbar in firefox, i end up with <div
> style="left: 398.5px;" id="image">. [398.5 being half of (797-0)]
>
> once i refresh, the image width is calculated correctly, and everything
> snaps into place.
>
> so... how am i approaching this incorrectly? how can i make sure that
> the css gets added only after the width is correctly included in the
> calculation?
>
> thanks in advance for your help.
>
> cheers,
> matt
>
--
View this message in context:
http://www.nabble.com/width%28%29-calculations-and-css-tf3461654.html#a9661777
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
