SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div width problem

    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):
    Code:
    <!-- 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:
    Code:
    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. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tnx!
    Hm, i did try jquery ready() function, but firefox and IE still causes same problems...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •