CODEWITHSUNDEEP
jquerycssresize
ultraloveninja
ultraloveninja

Reputation: 2139

Resize div based on height of another div

I'm currently working on something similar that was posted here. But for some reason I cannot get it to work when the viewport/browser window is resized. Not too sure if there is something with my CSS or if it's something else.

Here's the code that I am using:

$(document).ready(function() {

$('.more').hide();

$('.link').click(function() {
    $(this).next('.more').slideToggle();
}).toggle(function() {
    $(this).children("span").text("[-]");
}, function() {
    $(this).children("span").text("[+]");
    return false;
});
var maxHeight = 0;
$('div.simultaneously').each(function(index) {
    if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
    }
});
$('div.simultaneously').height(maxHeight);
});​

I'm trying to get the left column (lft-col) to match the height of the hidden div when it slides down. Overall I want the left column div to have the full height of the browser if the viewport is resized. And if the hidden div is slid down, if there is any scroll, I want the left column div to match the height of the right column div is revealed.

Here's my fiddle: http://jsfiddle.net/sLVsR/5/

If anyone has a different way to approach this, I am all for it as well.

Upvotes: 0

Views: 1640

Answers (1)

kei
kei

Reputation: 20521

Having re-read your question, I've made a few changes to your code

jQuery

$(document).ready(function() {

    $("div.lft-col").height($(window).height()-20); //I've put in -20 just so you can see the div shadow

    $('.more').hide();

    $('.link')
        .click(function() {
            $more = $(this).next('.more');
            $more.slideToggle('slow', function() {
                if ($more.is(":visible"))
                    $("div.lft-col").height($(document).height()-20);
               else
                    $("div.lft-col").height($(window).height()-20);
            });
        })
        .toggle(function() {
            $(this).children("span").text("[-]");
        }, function() {
            $(this).children("span").text("[+]");
            return false;
        });

    $(window).resize(function(){
       $("div.lft-col").height($(document).height()-20);
    });

});​

CSS

#container { 
    /*height: 100%;*/    
}

DEMO

Upvotes: 1

Related Questions