[jQuery] Height of images on page load.
Ok. I give Up. I need to know the height of certain images in my page to be able to format it and I've tried several workarounds like this function that I call right before my verJustify() function (yeah, a function that lets me justify vertically all divs in my page, just like the plug in):
<span style="font-family: courier new,monospace; font-style: italic;">/**</span><br style="font-family: courier new,monospace; font-style: italic;"><span style="font-family: courier new,monospace; font-style: italic;">
* Calculates the height of every image in the selection.</span><br style="font-family: courier new,monospace; font-style: italic;"><span style="font-family: courier new,monospace; font-style: italic;"> * Necesary for vertical justifying purposes.
</span><br style="font-family: courier new,monospace; font-style: italic;"><span style="font-family: courier new,monospace; font-style: italic;"> * Has to be called before verJustify().</span><span style="font-family: courier new,monospace; font-style: italic;">
</span><br style="font-family: courier new,monospace; font-style: italic;"><span style="font-family: courier new,monospace; font-style: italic;"> * @see verJustify()</span><br style="font-family: courier new,monospace; font-style: italic;">
<span style="font-family: courier new,monospace; font-style: italic;"> * @example calHeight("#left");</span><br style="font-family: courier new,monospace; font-style: italic;"><span style="font-family: courier new,monospace; font-style: italic;">
* @param string query - The selection to be precalculated</span><br style="font-family: courier new,monospace; font-style: italic;"><span style="font-family: courier new,monospace; font-style: italic;"> * @return none</span>
<br style="font-family: courier new,monospace; font-style: italic;"><span style="font-family: courier new,monospace; font-style: italic;"> */</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
function <span style="font-weight: bold; font-family: courier new,monospace;">calHeight</span>(query){</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> query = query + " img";
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $(query).each(function(){</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
$(this).css("height", $(this).css("height"));</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> });</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">}</span><br style="font-family: courier new,monospace;">
The problem with my layout is that basically every image's size is set dinamically when the page loads. Like a liquid layout but instead of using CSS and text, with a lot of images and JavaScript.
My theory was: ok, if Firefox doesn't calculate the width of an image before the formatting of the page, maybe i can force it to do it.
It works for some things but not for others and I don't know what else to try. The funny thing is that, in debugging mode, if I set a breakpoint to this function and then just let it execute, it works perfectly, but if I don't pause it manually it seems like there's not enough time to calculate every image's height.
¿Any suggestions?
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/