實時取決於其他元素寬度更改元素寬度

Question

由於我在腳本編寫中不夠好，無法找到正確的語法。

請看看下圖。我需要設置div.dependable的width爲X + 16px,即使窗口大小調整爲。

我有非常相似例子，請參閱的http://demuri.lv代碼。嘗試調整窗口大小 - 藍色塊將始終位於水平和垂直中心。但我無法弄清楚正確的編碼。

jQuery，Modernizr加載。

Answer 1

您必須首先勾上resize事件的window，從左側找出您的包裝的offset，然後修改你的元素的width因此，像這樣：

$(window).on('resize', function(){ 

    var leftOffset = $('#main-wrap').offset().left; 
    $('.dependable').css('width', leftOffset + 16); 

}); 

這將按照您的要求工作，但我也建議您首先添加相同的語句，以便在$(document).ready處獲得正確的寬度。

jQuery(document).ready(function ($){ 

    var leftOffset = $('#main-wrap').offset().left; 
    $('.dependable').css('width', leftOffset + 16); 

}); 

Working demo

爲了堅持的DRY code原則，你可能想在函數語句包裝起來的代碼;這將被高度建議。也許像這樣：

function offsetPlusX(targetElement, x){ 

    var leftOffset = $('#main-wrap').offset().left; 
    targetElement.css('width', leftOffset + x); 

} 

Answer 2

如果我理解正確，這意味着X是窗口寬度的值 - 主包裝寬度，然後除以2得到每邊的寬度。在DOM加載時以及每次調整窗口大小時，都必須確保調用此函數。

jQuery(document).ready(function($){ 
    calcDependable(); 
}); 

$(window).resize(calcDependable); 

function calcDependable(){ 
    var x = ($(window).width() - $("#main-wrap").width())/2; 
    x = (x < 0) ? 0 : x; // make sure value is always 0 or above 
    $(".dependable").width(x+16); 
} 

Answer 3

你必須挖掘到窗口resize事件，並確保在你的doc.ready循環使用

$(document).ready(function(){ 
    $(window).resize(function() { 
     var x = ($(window).width() - $('div#mainwrap').width())/2; 
     var targ_w = (x+16) + "px"; 
     $('div.dependable').css({'width': targ_w}); 
    }); 
});