Div width problem

JavaScript
1

i have problem with reading div width, sometimes, for this same div element, jquery returns width of 800 (which is correct), but then sometimes, it returns 93(which is not correct).

Here’s the html (part of it):

<!-- Window background-->
		<div id="windowBackgroundDiv" class="windowPopupTransparent" style="display: none;"> </div>
		
		<!-- Window-->
		<div id="window" class="windowPopupWindow" style="display: none;">
			<img src='images/icons/previous.png' />
			<a id='exitWindow' href='#'><img src='images/icons/up.png' /></a>
			<img src='images/icons/next.png' />
			<br>
			<img src='' id='windowImage'  style="display: none;"/>
</div>

and here jquery function:

function displayWindow(element)
{
	$(function()
	{
		var win = $('#window');
		var winBg = $('#windowBackgroundDiv');
		
		/*var url = $(element).attr('href');
		$("<br><img src ='" + url + "' />").append(win);*/
		bgWidth = $(document).width()-20;
		bgHeight = $(document).height()-20;
		
		var imgUrl = $(element).attr('href');
		$('#windowImage').attr('src',imgUrl).show();
		
		winHeight = $(win).height();
		winWidth = $(win).width();
		
		winTop = 40 + 'px';
		winLeft = 300 + 'px';
		
		$(winBg).css('width', bgWidth).css('height', bgHeight).show();
		$(win).css('top',winTop).css('left', winLeft).show();
		
		console.log(winWidth);
		
		$('#exitWindow').click(function()
		{
			$('#window').hide();
			$('#windowBackgroundDiv').hide();
		});
	return false;
	});

console.log(winWidth);
this line is the problem. Sometimes, it says width of that div element is 800, sometimes 93. I put border around div, and i can clearly see it really hs width of 800, but sometimes, i still says (firebug) that width is 93.
Oh yeah, there is the image inside this div.

Any ideas?

2

That’s because image didn’t load yet. Javascript doesn’t stop executing when you insert image in code, image is being loaded in other thread, so sometimes it loads when you get to point of checking width, sometimes it doesn’t load.

I suggest to assign onload event handler for your image and use it to calculate div position.

3

tnx a lot!

Ah, i thought it would be something like that. You know by any chance if i use jquery, is load() the right thing that i need here?
Would i write something like
$(img).load(function(){…enter code here…});
would something like this be correct?

4

Yes, that is correct code. Make sure you assign event before assigning image source, or image might get loaded before you assign event and then event won’t be fired.

5

tnx!
Hm, i did try jquery ready() function, but firefox and IE still causes same problems…