2012-08-27 49 views
0

我正在爲我的應用程序創建一個任務管理器,並且我正在嘗試計算該小部件的高度,然後在符合要求時執行一些操作。基本上我想讓窗口的高度減去另一個數字以獲得任務小部件的最大高度(最小高度已經設置)。然後我想動態獲取div的實際高度,如果它等於最大高度比我想改變一些CSS屬性。我正在使用jQuery 1.5.2來做到這一點。以下是我有...動態高度/最大高度和溢出

$(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); 
} 
}); 

這個偉大的工程,只要「警報(‘真正’)」打完第一和「最大高度」「高度」的變化

當警報被註釋掉時,if語句停止工作。

$( 「#任務」)。CSS( '高度',TH)更改爲$( 「#任務」)。CSS( '最大高度',TH)

這些值是瘋狂關閉的。例如:78/130。該css如下...

#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; 
} 

任何幫助,將不勝感激。提前致謝。

+0

你有什麼div在頁面中看起來像一些html? – ShaunOReilly

回答

1

我用下面的每一個窗口被調整時間:

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); 
} 

爲了讓我幫你更多,我要看看你的最基本的HTML這個工作,然後我將改變用相應的工作樣本進行編碼。

心連心

1
  1. 可以使用$('').height()作爲二傳手,太! - >$('#tasks').height(th);

  2. 使用$('').css('height':myVal)請記住,您需要指定一個單位(例如px)。你現在不做塔爾。

  3. 你是什麼意思是

當警報被註釋掉,if語句停止工作。

當你去掉警報時,你的其他分支沒有做任何事情。