Currently, I am in the process of developing a task manager for my application and facing an obstacle when trying to calculate the height of a widget. My goal is to determine the maximum height (assuming a minimum height is already set) by subtracting a certain value from the window's height for the task widget. Subsequently, I aim to dynamically retrieve the actual height of the div element and if it matches the calculated max-height, apply changes to some CSS properties. To accomplish this, I am utilizing jQuery version 1.5.2. Here is the code snippet that I have implemented...
$(document).ready(function() {
//Obtain the height for #tasks
var tH = Math.round($(window).height() - 463);
$('#tasks').css('height', tH); //Set it as the max height
var ti = Math.round($("#tasks").height()); //Retrieve the actual height of #tasks
if(tH==ti){ // If the actual height of #tasks equals the max-height, then perform...
//alert('true');
$('.taskItems').css('width', '172px');
$('.tT, .tD').css('width', '135px');
console.debug(ti + ' ' + tH);
}else{
alert(tH + ' ' + ti);
console.debug(ti + ' ' + tH);
}
});
This method works perfectly fine when the "alert('true')" executes first and "max-height" is modified to "height".
However, the functioning of the if statement halts once the alert is removed.
Furthermore, changing "
$("#tasks").css('height', tH)
to "
$("#tasks").css('max-height', tH)
results in significantly mismatched values, for instance, 78/130. The corresponding CSS styling is provided below...
#tasks {
border:1px solid #D1D1D1;
border-top:none;
color:rgb(82,124,149);
display:inline-block;
font-size:12px;
margin:0px 0px 0px 1px;
overflow:auto;
width:194px;
}
Any assistance on resolving this issue would be greatly appreciated. Thank you in advance.