Question

Using jQuery I have created a pop up dialog box, this then populates the divs .side-article-title, .side-article-subtitle and .side-article-detail with information pulled from the articles URL using .load().

But the height of .side-article-detail needs to alter depending on the height of the other 2 mentioned above and I cannot seem to get the variable detailheight to subtract the values from the ajax returns of .height();

jQuery

$('body').prepend('<div class="side-article"><div class="side-article-close">X</div><div class="like">Like This</div><div class="article-inner"><div class="side-article-title"></div><div class="side-article-subtitle"></div><div class="side-article-detail"></div></div></div>');

var titleheight = null;
var subtitleheight = null;
var articleHeight = null;
$('.side-article-title').load(thisURL+' #item-title',function(){
        titleheight = $('.side-article-title').height();
        console.log(titleheight);
    });
    $('.side-article-subtitle').load(thisURL+' #item-subtitle',function(){
        subtitleheight = $('.side-article-subtitle').height();
        console.log(subtitleheight);
    });
    $('.side-article-detail').load(thisURL+' #item-detail',function(){
        $('#item-detail').jScrollPane();
    });

the elements to set the height to

    var detailheight = articleHeight -  titleheight - subtitleheight;
    $('.side-article-detail, .jspContainer').css('height',detailheight);

Answer 1

All functionality for ajax needs to be done in callbacks after they have completed. You can’t depend on them working in any order:

$.when($('.side-article-title').load(thisURL+' #item-title', function () {...}),
   $("...").load(...),
   $("...").load(...)
).done(function () {
   var detailheight = articleHeight -  titleheight - subtitleheight;
});

The .done callback will only fire when all of the ajax requests have been completed.