Using jQuery to adjust a parent element's height to match it's visible child's height

Question

I've got a slideshow running in a container and need the height of the container to match the visible slide's height. Unfortunately the images are absolutely positioned and there's nothing I can do about it. To deal with that, I'm using a little jQuery magic to take care of the same functionality.

For some reason, my code isn't working. Whenever the #container element is resized the function runs and is supposed to adjust #main's height to the same value as the visible slide's.

But, uh.. no bueno. Not showing any errors in my console. Thoughts?

http://jsfiddle.net/danielredwood/2G4ky/3/

Slideshow Plugin: http://jquery.malsup.com/cycle/

HTML:

<div id="container">
  <div id="main" class="home" role="main">
      <img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452120_800_892531_800.jpg" />
      <img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452125_800_37eba7_800.jpg" />
      <img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452132_800_7dc0b6_800.jpg" />
  </div>
</div>

CSS:

#container {
    max-width:960px;
}
#main {
    max-width:780px;
    height:520px;
    margin:0 auto 40px;
    overflow:hidden;
    background:#ccc;
}
#main img {
    width:100%;
    height:auto;
}

JavaScript:

$('.home').cycle({
    fx:'fade' 
});
$('#container').resize(function(){
      var child_height = $('.slide:visible').height();
      $('#main').css('height', child_height);
});

Two things: you should include the code in the question, to create a permanent record of the problem which can help others in the future. The second thing is you have a bad choice of image - people solve stackoverflow questions as a break while working, and this is not an image I would want other people to see on my monitor. — Andrew Shepherd, Jul 30 '11 at 08:43
And, further to @Andrew's comment: if you're using a plugin *specify*, and *link to*, the plug-in, in your question. It reduces the effort we have to expend to help you. — David Thomas, Jul 30 '11 at 08:49
@Andrew Shepherd - updated the question with appropriate code. Thanks's for the heads up. — technopeasant, Jul 30 '11 at 08:51
I'm not sure because it seems too obvious: shouldn't it be "var child_height = $('.slide:visible').height()" — Andrew Shepherd, Jul 30 '11 at 08:53
@Andrew Shepherd. Wow, sloppy mistake on my part! It should be. However, still doesn't work. Updating above code and JS Fiddle to reflect- — technopeasant, Jul 30 '11 at 17:03

score 3 · Answer 1 · answered Jul 30 '11 at 08:45

3

I'd suggest using the plug-in's callback options, particularly the after:

$('.home').cycle({
    fx:'fade',
    after: function(){
        $('#main').css('height',$(this).outerHeight());
    }
});

Updated JS Fiddle demo.

References:

cycle() plug-in's 'callback' documentation/demonstration

answered Jul 30 '11 at 08:45

David Thomas

249,100
51
377
410

appreciate the answer.. doesn't achieve what I'm looking for. Instead of adjusting the image's height, I'd like to adjust it's parent, #main, to match it's height. So.. flip-flopped. – technopeasant Jul 30 '11 at 08:47
It...doesn't adjust the image's height. `$(this).outerHeight()` retrieves the height of the image, and assigns that height to the `$('#main')` element. – David Thomas Jul 30 '11 at 08:52
Oh, right, I didn't realize it before because it adjust at the slides interval. I'm looking for something continuous and instant, which is why I wandered down the road I did. – technopeasant Jul 30 '11 at 09:37
Can you define what you mean by 'continuous and instant'? Or explain how this answer doesn't address the problem you're having? Then I can try and address that problem for you. – David Thomas Jul 30 '11 at 10:30
Sure David. I'm sorry for being too vague. Your answer does have the desired effect, but only during the turn around of the slide's cycle. If slide A is on and you resize the window to something smaller than the original size, the height of #main remains 520px until slide A cycles out and B cycles in. Upon B's completion in, #main is dropped into the smaller size and it snaps to the smaller size. Instead, I need it to adjust continuously just as the image size does. – technopeasant Jul 30 '11 at 17:03
Using the Before callback is a little better, but I'd still prefer it to be independent of the slideshow and continuous. Just as if CSS would act while resizing the container, but without the slide show – technopeasant Jul 30 '11 at 17:21

score 1 · Accepted Answer · answered Aug 01 '11 at 18:05

1

Instead of running before or after the slideshows callback, this scales the image as the window resizes. Perfect!

$(window).resize(function() {
    $('#main').css('height',$('img.slide:visible').height());
});

answered Aug 01 '11 at 18:05

technopeasant

7,809
31
91
149

score 0 · Answer 3 · answered Jun 05 '12 at 19:03

I found this to work well:

$(window).load(function() {
var imageHeight = $(".image-box img").height();
$(".image-box img").parent().css('height', imageHeight);
});

$(window).resize(function() {
var imageHeight2 = $(".image-box img").height();
$(".image-box img").parent().css('height', imageHeight2);
});

Where ".image-box" is the container for your images.

I also added this to my CSS for responsiveness:

.image-box img{
max-width: 100%;
height:auto !important;

}

Using jQuery to adjust a parent element's height to match it's visible child's height

3 Answers3

Linked