SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    936
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Jquery: Getting the size of an element loaded with ajax

    The script below loads content into a lightbox window.

    I am trying to figure out how to calculate the height of the box after the content is loaded into it.
    It currently is finding the height prior to loading causing a problem with the vertical centering



    Here is the page:
    One Equity Partners :: All Companies

    Thank You E

    Code JavaScript:
    	$('.more_info').click(function(){
     
     
     
    				popout="<div id='lightbox_pop_out'></div>";
    				lightbox="<div id='lightbox'></div>";
    				$('body').prepend(popout+lightbox);
     
    				popout_id=$(this).find('a').attr('id');
     
    				$.ajax({
       					type: "POST",
       					url: "/application/view/content/portfolio_pop_up.php?portfolio="+popout_id,
       					data: "name=John&location=Boston",
       					success: function(msg){
         					$('#lightbox_pop_out').append(msg);
     
       					}
     				});
     
    				$("body").css("overflow", "hidden");
     
                                   //center lightbox
    				w=$(window).width();
    				h=$(window).height();
     
    				lw=$('#lightbox_pop_out').width();
    				lh=$('#lightbox_pop_out').height();
     
     
         			        if(lh<h){ ptop=(h-lh)/2; }
    				else { ptop=10; }
    				left=(w-lw)/2;
    				console.log(lh);
    				$('#lightbox_pop_out').css({'top':ptop,'left':left+'px'});
    				$('#lightbox_pop_out').fadeIn('fast');
     
    				return false;
     
    			});
    Last edited by eruna; Jun 21, 2011 at 11:45. Reason: forgot to say thank you

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    936
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I figured it out

    Code JavaScript:
    $('#lightbox_pop_out').ajaxStop(function(){
    					w=$(window).width();
    					h=$(window).height();
     
    					lw=$('#lightbox_pop_out').width();
    					lh=$('#lightbox_pop_out').height();
     
     
         				if(lh<h){ ptop=(h-lh)/2; }
    					else { ptop=10; }
    					left=(w-lw)/2;
     
    					$('#lightbox_pop_out').css({'top':ptop,'left':left+'px'});
    					$('#lightbox_pop_out').fadeIn('fast');
    				});


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
  •