CODEWITHSUNDEEP
jquerycssdynamicheightrows
Nippon
Nippon

Reputation: 25

How can I dynamicly set height of two rows with changing content

I'm trying to make sidebar with fixed position. It consists of:

After few hours I have this: http://jsfiddle.net/Nippon/cVnDf/

var $window = $(window),
    $wrapper = $('.chat');

$window.resize(function(){
      $wrapper.css({
          height: $window.height() * 0.55 - 105 + "px"
      });
}).resize();

It's not working completly as I intented (kinda new to jquery). How can I set height of chat div to always fill the screen, resize on smaller resolution/window resize and react to expanding/collapsing name blocks and deleting/adding one (there won't always be 3 blocks)?

Upvotes: 1

Views: 105

Answers (1)

Zak Greene
Zak Greene

Reputation: 68

I'm not sure what you were intending to do with * 0.55. If you want the chat to fill the remaining space, it's a matter of subtracting the heights of the other elements from the total window height, like so:

$window.height() - $(".topWrapper").outerHeight() - $(".sendArea").outerHeight()

I'm using outerHeight() to account for any margins and padding.

I also find it easier to create a separate function to apply the height, which can be applied on resize, on expanding the menu, etc.

--

Edit: You also need to make sure setHeight fires after the toggle animation finishes, so the height is accurate. Try this:

var $window = $(window),
$wrapper = $('.chat');

function setHeight() {
    th = $(".topWrapper").outerHeight();
    sa = $(".sendArea").outerHeight();
    $wrapper.css("height", $window.height() - th - sa - 20);
}

$window.resize(function(){
    setHeight();
}).resize();

$(".daneExpand").click( function() {
    $('.dane').not($(this).next()).slideUp(400);
    $(this).next().slideToggle(400, setHeight);
});

Upvotes: 1

Related Questions