jQuery - Automatic change values after resizing the browser window

Question

We have following code (addition, the presence of the plugin DataTables)

$('#myTable').dataTable( {
      "scrollY":  height, <-- auto height here
      "scrollCollapse": true,
} );

I dont' know so well jquery and I have a problem with the automatic changing values.

I have a div element where the height is a percentage (for example: 50%) and and I want to get this height in pixels. Ofcourse the height is changing as many times as the browser window is changed.

Unfortunately, I don't know how to do, Someone here can help? (preferably an example)

Update 1:

I tried so like that

    var ch = $('#dataTableWrapper').height() - 110; // I subtracted the value of the height of my static elements in a div 

    $('#dataTableID').dataTable( {
        "scrollY": ch,
        "scrollCollapse": true,
    } );

    $(window).resize(function(){
        ch = $('#dataTableWrapper').height() - 110; // same as above
        $('.dataTables_scrollBody').css('height', ch);
    });

Apparently it works, but if anyone had a more elegant solution I would ask about throwing code.

Answer 1

You can do like this:

$( window ).resize(function() {
   var scroll = $("#yourDiv").height();
   });

Answer 2

This might be a dumb thing to suggest, but are you just looking for a simple refactoring?

function getTableHeight() {
    return $('#dataTableWrapper').height() - 110;
}

$('#dataTableID').dataTable( {
    "scrollY": getTableHeight(),
    "scrollCollapse": true,
} );

$(window).resize(function(){
    $('.dataTables_scrollBody').css('height', getTableHeight());
});