title: Problem getting height from div after ajax request
body: <p>I'm having a problem getting height from a div which is being filled by an ajax request. Consider following code</p>
  
  <pre><code>(function($) {
   $.fn.flickr = function(o){
   var s = {
  api_key: '',              // [string]    required, see http://www.flickr.com/services/api/misc.api_keys.html
  type: null,                 // [string]    allowed values: 'photoset', 'search', default: 'flickr.photos.getRecent'
  photoset_id: null,          // [string]    required, for type=='photoset'  
  text: null,                     // [string]    for type=='search' free text search
  user_id: null,              // [string]    for type=='search' search by user id
  group_id: null,             // [string]    for type=='search' search by group id
  tags: null,                 // [string]    for type=='search' comma separated list
  tag_mode: 'any',            // [string]    for type=='search' allowed values: 'any' (OR), 'all' (AND)
  sort: 'date-posted-asc',    // [string]    for type=='search' allowed values: 'date-posted-asc', 'date-posted-desc', 'date-taken-asc', 'date-taken-desc', 'interestingness-desc', 'interestingness-asc', 'relevance'
  thumb_size: 's',            // [string]    allowed values: 's' (75x75), 't' (100x?), 'm' (240x?)
  size: 'o',                 // [string]    allowed values: 'm' (240x?), 'b' (1024x?), 'o' (original), default: (500x?)
  per_page: 100,              // [integer]   allowed values: max of 500
  page: 1,                      // [integer]   see paging notes
  attr: '',                   // [string]    optional, attributes applied to thumbnail &lt;a&gt; tag
  api_url: null,              // [string]    optional, custom url that returns flickr JSON or JSON-P 'photos' or 'photoset'
  params: '',                 // [string]    optional, custom arguments, see http://www.flickr.com/services/api/flickr.photos.search.html
  api_callback: '?',          // [string]    optional, custom callback in flickr JSON-P response
  callback: null              // [function]  optional, callback function applied to entire        &lt;ul&gt;
   };
   if(o) $.extend(s, o);
   return this.each(function(){
   // create unordered list to contain flickr images
       var list = $('&lt;ul&gt;').appendTo(this);
     var url = $.flickr.format(s);
      $.getJSON(url, function(r){
    if (r.stat != "ok"){
      for (i in r){
          $('&lt;li&gt;').text(i+': '+ r[i]).appendTo(list);
      };
    } else {
      if (s.type == 'photoset') r.photos = r.photoset;
      // add hooks to access paging data
      list.append('&lt;input type="hidden" value="'+r.photos.page+'" /&gt;');
      list.append('&lt;input type="hidden" value="'+r.photos.pages+'" /&gt;');
      list.append('&lt;input type="hidden" value="'+r.photos.perpage+'" /&gt;');
      list.append('&lt;input type="hidden" value="'+r.photos.total+'" /&gt;');
      for (var i=0; i&lt;r.photos.photo.length; i++){
        var photo = r.photos.photo[i];
        // format thumbnail url
        var t = 'http://farm'+photo['farm']+'.static.flickr.com/'+photo['server']+'/'+photo['id']+'_'+photo['secret']+'_'+s.thumb_size+'.jpg';
        //format image url
        var h = 'http://farm'+photo['farm']+'.static.flickr.com/'+photo['server']+'/'+photo['id']+'_';
        switch (s.size){
          case 'm':
            h += photo['secret'] + '_m.jpg';
            break;
          case 'b':
            h += photo['secret'] + '_b.jpg';
            break;
          case 'o':
            if (photo['originalsecret'] &amp;&amp; photo['originalformat']) {
              h += photo['originalsecret'] + '_o.' + photo['originalformat'];
              break;
            };
          default:
            h += photo['secret'] + '.jpg';
        };
        list.append('&lt;li&gt;&lt;a href="'+h+'" '+s.attr+' rel="photographs"&gt;&lt;img src="'+t+'" alt="'+photo['title']+'" /&gt;&lt;/a&gt;&lt;/li&gt;');
      };
      if (s.callback) s.callback(list);
  
          $('#photographs ul li a img').fadeTo('fast', 0.7);
  
          $('#photographs ul li a img').hover(function() {
              $(this).fadeTo('fast', 1);
              },function() {
              $(this).fadeTo('fast', 0.7);
          });
  
          $("#photographs ul li a").fancybox({
              'hideOnContentClick': false,
              'zoomSpeedIn':      0, 
              'zoomSpeedOut': 0, 
              'overlayShow':      true,
              'overlayColor': '#000',
              'overlayOpacity': 0.9,
              'padding': 0
          });
  
  
  
  
             var outer = $('#photographs').outerHeight(),
             inner = $('#test').height();
  
  
             if(inner&gt;outer){
                 alert('Inner exceeded outer');
             }
  
  
  
  
  
  
        };
      });
  });
  };
  </code></pre>
  
  <p>At the very end, all my code in the callback is working on the ajax added images itself. I need to calculate the height of the inner div but i always get '0' because the images haven't been added yet. How do it do that?</p>
  
  <p>Thank you very much if anyone can help me!</p>
  
  <p>Mathijs</p>