CODEWITHSUNDEEP
javascriptjqueryheight
Resitive
Resitive

Reputation: 370

Calculate height from multiple columns with JavaScript/jQuery

I've been banging my head against a wall for some time now, this is what I'm trying to do:

I have 3 div's, 2 of them have a minimum height of 300px, the 3rd columns needs to be the height of the 2 div's together + a 15px margin.

Here's a small example http://jsfiddle.net/AAKcJ/4/

So far i've found a way to get the height of one column, but I have no idea how to calculate with it since I cant acces the variable outside of the function as I'm not really experienced with JavaScript.

    var style_col1 = $("#column1").css( ["height"] );

    $.each(style_col1, function( prop, value ) {
      var height_col_1 = value;
    });


    var style_col2 = $("#column2").css( ["height"] );

    $.each(style_col2, function( prop, value ) {
      var height_col_2 = value;
    });

Any help is appreciated :)

Upvotes: 1

Views: 245

Answers (1)

PSR
PSR

Reputation: 40338

You can take a global variable which is visible in both functions

var height = 0;
 $('#column1,#column2').each(function(){
     height += $(this).height();
});

$('#column3').css('height', height+15);

or

height = $('#column1')height()+$('#column2')height();
$('#column3').css('height', height+15);

Upvotes: 1

Related Questions