Javascript: Adjusting image container height to dynamic image height after image load?
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['compan开发者_如何学CyID'] ?>';
}
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!
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.
精彩评论