Dynamic height/max-height and overflow

Question

I am creating a task manager for my app and I'm trying to calculate the height of the widget then do something if it meets requirements. Basically I I want to get the height of the window minus another figure to get the max-height (a min-height is already set) of the task widget. Then I want to dynamically get the actual height of the div and if it equals the max height than I want to change a few css properties. I'm using jquery 1.5.2 to do this. Here is what I have...

$(document).ready(function() {
//Get the height for #tasks
var tH = Math.round($(window).height() - 463);
$('#tasks').css('height', tH); //Make it the max height
var ti = Math.round($("#tasks").height()); //Get actual height of #tasks

if(tH==ti){ // If #tasks actual height is equal to the max-height than do...
    //alert('true');
    $('.taskItems').css('width', '172px');
    $('.tT, .tD').css('width', '135px');
    console.debug(ti + ' ' + tH);
}else{
    alert(tH + ' ' + ti); 
    console.debug(ti + ' ' + tH);
}
});

This works great as long as the "alert('true')" fires off first and "max-height" is change to "height".

When the alert is commented out, the if statement stops working.

When the

$("#tasks").css('height', tH) is changed to $("#tasks").css('max-height', tH)

the values are insanely off. Example: 78/130. The css is as follows...

#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 help would be appreciated. Thanks in advance.

Have you got some html of what the div would look like in the page? — ShaunOReilly
– ShaunOReilly, Commented Aug 28, 2012 at 0:04

ShaunOReilly · Accepted Answer · 2012-08-28 00:08:31Z

I use the following every time the window gets resized:

jQuery(document).ready(function () {

    jQuery(window).resize(function () {
        //alert("window changed");
        resizeDivs();
    });
});

function resizeDivs() {
    var clientWidth = jQuery(window).width();
    var clientHeight = jQuery(window).height();
    var newHeight = 100;
    var newWidth = 100;

    var firstDatasegment = jQuery(".datasegment")[0];

    if (!jQuery(firstDatasegment).width()) {
        currentWidth = jQuery(firstDatasegment).clientWidth;
        newHeight = currentWidth - (currentWidth / 7);
        newWidth = currentWidth;
    }
    else {
        //currentWidth = jQuery(".datasegment")[0].css("width");
        currentWidth = jQuery(firstDatasegment).width();
        newHeight = currentWidth - (currentWidth / 7);
        newWidth = currentWidth;
    }

    jQuery(".datasegment").height(newHeight);
    jQuery(".sidemenu").height(clientHeight);
    jQuery(".maindatacontent").height(clientHeight);
    jQuery(".text-glow").css("font-size", (clientWidth / 50) + "px");
    jQuery(".hovermenuicon .menudesc").not('.bucketText').css("font-size", (clientWidth / 50) + "px");
    jQuery("td.menudesc span:first-child").not('.bucketText').css("font-size", (clientWidth / 50) + "px");
    jQuery(".sidemenudesc").css("font-size", (clientWidth / 80) + "px");
    jQuery(".datavalue").css("font-size", (clientWidth / 80) + "px");
    jQuery(".mainmenuitem").css("font-size", (clientWidth / 50) + "px");
    jQuery(".qireportgridview table").css("font-size", (clientWidth / 80) + "px");
    jQuery(".scrolldivbig").height(clientHeight);
}

In order for me to help you more, I need to see your most basic html for this to work, and then I will change the code accordingly with a working sample.

hth

LeJared · Accepted Answer · 2012-08-28 00:12:17Z

1

you can use $('').height() as a setter, too! --> $('#tasks').height(th);
When using $('').css('height': myVal) keep in mind, that you need to specify a unit (e.g. px). You don't do thar right now.
What do you mean be

When the alert is commented out, the if statement stops working.

Your else-branch is not doing anything when you strip out the alert.

answered Aug 28, 2012 at 0:12

LeJared

2,0521 gold badge17 silver badges28 bronze badges

Collectives™ on Stack Overflow

Dynamic height/max-height and overflow

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related