CODEWITHSUNDEEP
javascriptjquerycss
Mark Sheev
Mark Sheev

Reputation: 29

Get Column height and width and update on resize

I have this HTML:

<div class="columna1"> CONTENT1 </div>
<div class="columna2"> CONTENT2 </div>

And this javascript:

column1_height = $('#columna1').height();
column1_width = $('#columna1').width();
column2_height = $('#columna2').height();
column2_width = $('#columna2').width();

But when I resize the screen the values does not update.

Thanks

Upvotes: 2

Views: 396

Answers (1)

Marcos Aguayo
Marcos Aguayo

Reputation: 7170

Try this:

$(document).on('ready', initFunction);
$(window).on('resize', getSizes);

var column1_height = 0;
var column1_width = 0;
var column2_height = 0;
var column2_width = 0;

function initFunction(){
    getSizes();
}

function getSizes(){
    column1_height = $('#columna1').height();
    column1_width = $('#columna1').width();
    column2_height = $('#columna2').height();
    column2_width = $('#columna2').width();

    console.log("Column 1: (Height: " +column1_height+ ") - (Width: " +column1_width+ ")");
    console.log("Column 2: (Height: " +column2_height+ ") - (Width: " +column2_width+ ")");
}

This should work

Upvotes: 3

Related Questions