jquery - 他の要素の幅に応じてオンザフライで要素の幅を変更する

Question

私はスクリプトが苦手なので、正しい構文を見つけることができません。

以下の画像をご覧ください。div.dependableウィンドウのサイズ変更中であっても、 aswidthを設定する必要があります。X + 16px

かなり似た例があります。 のコードを参照してくださいhttp://demuri.lv。そこでウィンドウのサイズを変更してみてください — 青いブロックは常に水平方向と垂直方向の中央にあります。しかし、そのための正しいコーディングを理解できません。

jQuery、Modernizr が読み込まれました。

Answer 1

ウィンドウのサイズ変更イベントを利用し、必ず 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});
    });
});

Answer 2

私がそれを正しく理解していれば、これは X がウィンドウ幅の値 - #main-wrap width であり、それを 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最初に のイベントにフックし、左側からラッパーの をwindow見つけて、それに応じて要素の を次のように変更する必要があります。offsetwidth

$(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 コードの原則に固執するために、関数ステートメントでコードをラップすることができます。それは強く提案されます。おそらく次のようになります。

function offsetPlusX(targetElement, x){

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

}