[jQuery] Calculate Width after load event fires on element display:none
Hello
I am loading an image via jQuery. I attach a load event to the image and append it to a hidden element (display:none) When the load event fires, I want to grab the width of the image so I can center it on the screen when I fade it in using fadeIn() - however, the width is 0. If I change to using visibility:hidden the width is available in FF3 (mac) but the fadeIn function doesn't work properly.
Is this a known issue? It seems to work fine when the image itself is set to display none, but I have a frame on my container that needs to say hidden as well.
Bare bones example, see attached HTML file for running example of code
function loadImage() {
// don't always know the image width - must always be centered
var bxWidth = 600, d = jQuery("<div />")
.css( { 'display' : 'none',
'top' : '50', 'left' : bxWidth/2, 'position' : 'absolute'
}).appendTo( jQuery('body') );
jQuery("<img />").attr('src', '<a href="http://graphics8.nytimes.com/images/2009/05/13/us/13aig-337.jpg').load(">http://graphics8.nytimes.com/images/2009/05/13/us/13aig-337.jpg').load(</a> imageLoadEvent ).appendTo( d );
}
function imageLoadEvent( e ) {
var img = jQuery( this );
console.log( img.width() );
img.css( 'left' , (600/2) - img.width()/2 )
img.parent().fadeIn();
}
loadImage();
thanks
-gregory
I found others with the same issue dating back almost a year, but no responses from anyone in the list. Hoping this is a known issue.<br clear="all">
--
Ned Flanders: "I wish we lived in a place more like the America of yesteryear that only exists in the brains of us Republicans."
________________________________
Geek Out on Encoded Blog
<a href="http://gregorytomlinson.com/encoded/">http://gregorytomlinson.com/encoded/</a>