Javascript: Adjusting image container height to dynamic image height after image load?

Question

i load graphs via the following javascript function:

function loadMCorCBGraph(self,surveyID,questionID,varID) {
    var img = new Image();

    img.onload = function() {
        $(self).parents().parents().siblings(".graph_container")
        .empty().append(img);
    };

    img.src = 'drawGraph.php?type=surveys_report_MC_or_CB&surveyID=' + surveyID + '&questionID=' + questionID +
        (varID != null ? '&varID=' + varID : '') + '&companyID=<?php echo $_SESSION['companyID'] ?>';   
}

however, the graph height is unknown until it is drawn. i was wondering if there was a way to get this height after it has loaded and set the container height to cet height.

i thought about putting:

.css("height", THE_IMAGE_HEIGHT)

in the onload function, but i am having trouble finding this image's height. debugging shows that (inside the onload):

$(this).height() = 0
img.height = ReferenceError: img is not defined
this.height = 425

now the last one, this.height, is clearly referring to the container, which is set with a height of 425px.

any ideas as to how to get the height?

thanks!

Answer 1

img.onload = function() {
    $Container = $(self).parents().parents().siblings(".graph_container");

    $Container.empty().append(img);

    this.find('img').each(function(){
        //Dynamically check each image
        if(this.height > 400)
        {
            $(this).height(400);
        }
        console.log(this); //Should see object with attribs.
    })
};

Give that a go and tell me what happens, also check your console log to see if the Object is the image element.