CODEWITHSUNDEEP
jqueryhtmlheightresponsive-design
mahnouel
mahnouel

Reputation: 94

How can I set a div's height matching to responsive content?


i try to do following:
on click re-sizing a divs height matching to the divs content height ( the content is through "overflow:hidden" hidden )
the content of the div is responsive ( means if the window width changes the divs content height changes, too.

on click changing the divs (.video) height to match the divs content (.video-container) height:

$('.video').click(function()
{
    $(this).animate(
    {
        height:$('.video .video-container').height()
    });
});

this works pretty well, but if I resize the window the height of .video-container changes, and I need to resize .video onesmore.

this is everything I already got:

video:

<div class="video">
    <div class="video-container">
        <div class="flowplayer">
            <video preload='none'>
                <source type="video/mp4" src="video.mp4"/>
            </video>
        </div>
    </div>
</div>

javascript:

$(document).ready(function()
{
    $('.video').click(function()
    { 
        $(this).animate(
        {
            height:$('.video .video-container').height()
        }); 
    });

Link removed - ( found solution and everything works now )

If you click on the first black container it extends, after that you'll note if you re-size the browser the video gets smaller, but the container stays big. i hope this clarifies the problem.

Upvotes: 2

Views: 1863

Answers (1)

jk.
jk.

Reputation: 14435

Based on the new information you posted, I came up with this:

New fiddle example: http://jsfiddle.net/YSqAX/4/

I used a resize plugin since the native jquery resize will not detect when elements resize.

Ben Alman jquery resize plugin

//animate height
$.fn.animateHeight = function (container) {
    var thisHeight = $(container).map(function (i, e) {
        return $(e).height();
    }).get();

    return this.animate({
        height: thisHeight
    });
};

$(".video").on("click", function () {
    $(this).animateHeight(".video-container");
});

$(".video").resize(function (e) {
    $(this).animateHeight(".video-container");
});

Upvotes: 1

Related Questions