August 17, 2010
resize DIV matching the new content with jquery
Question by Sandro Antonucci
I have a DIV which shows one image at once coming from an ajax script, the images are all different in height and are showed with fadeIn/fadeOut (just for the tag)
How can I allow to resize the DIV (that contains the img tag of course) “sliding” based on the new content before the images that fadein changes the DIV height very rudely?
Thanks
Answer by Starx
Well do Something like this
$(".change").click(function() {
$(".mydiv").fadeOut('slow');
$(".myimg").attr("src",'');
$(".myimg").attr("src","linktonewimage.jpg");
var newheight = $(".myimg").height();
$(".mydiv").css("height",newheight+"px");
$(".mydiv").fadeIn('slow');
});
I am assuming you have a <img>
tag with myimg
class inside a div
with mydiv
class.
Check the DEMO HERE