2


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.

mahnouel
  • 94
  • 1
  • 1
  • 12

1 Answers1

1

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");
});
jk.
  • 14,365
  • 4
  • 43
  • 58
  • Well, i guess you misunderstood me: what you said is already done by the line `$('.video').click(function(){$(this).animate({height:$('.video .video-container').height()});});`the problem is the height of .video-container gets changed by re sizing the window, so i need to update all extended divs with the new height. Ill update the first post with some more information. – mahnouel Mar 31 '13 at 20:00
  • @memylo Thanks. The additional information helped. Answer updated. – jk. Apr 01 '13 at 01:01
  • 1
    worked, just added a check if its already expanded: `if ( $(this).height() > 170){$(this).animateHeight(".video-container");}` – mahnouel Apr 01 '13 at 11:55