实时取决于其他元素宽度更改元素宽度

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