0

サイズ変更イベントを同期するのに少し問題があります。基本的に、$M.resize は div の幅 (css) を更新し、次に $API.resize がその新しいサイズを読み取り、それに応じてその要素を更新するようにします。ただし、ウィンドウのサイズ変更イベント (以下を参照) を設定し、すぐにウィンドウのサイズ変更イベントをトリガーすると、$M.resize の更新が完了していないかのように、$API.resize は新しい幅情報を取得しません。$API.resize は $("#main").css("width"); を介して新しい幅情報を取得します。私がそれを機能させる唯一の方法は、setTimeout を使用して以下の回避策を行うことです..これを行うためのより良い方法はありますか?

// on page load
$(function () {
    $(window).resize(function () {
        $M.resize();
        $API.resize();
    });
    setTimeout(function () {
        $(window).resize();
    }, 100);
});

// $API.resize
function () {
    var pageWidth = $M.width();
    console.log("pageWidth = " + pageWidth);
    $("#atmoGrid").css("width", pageWidth);
    $(".atmoSector")
        .css("width", pageWidth/5-2)
        .css("height", pageWidth/5-2);
}

// $M.resize
function () {
    // refresh screen dimensions
    width = Math.min(screen.availWidth, window.innerWidth);
    height = Math.min(screen.availHeight, window.innerHeight);
    smallScreen = (width < smallWidth);
    fontScale = (smallScreen) ? 3 : 1;

    // check if screen is small
    if (smallScreen) {
        $("#main").css("width", "100%");
    } else {
        $("#main").css("width", smallWidth + "px")
    }
    $("#main").css("font-size", $M.font(18));
}

// $M.width
function () {
    var width = $("#main").css("width");
    return parseInt(width);
}
4

1 に答える 1

0

これを試して：

// on page load
$(function () {
    $(window).resize(function () {
        $M.resize();
    });
});

// $API.resize
function (mWidth, mHeight) {
    var pageWidth = mWidth;
    console.log("pageWidth = " + pageWidth);
    $("#atmoGrid").css("width", pageWidth);
    $(".atmoSector")
        .css("width", pageWidth/5-2)
        .css("height", pageWidth/5-2);
}

// $M.resize
function () {
    // refresh screen dimensions
    width = Math.min(screen.availWidth, window.innerWidth);
    height = Math.min(screen.availHeight, window.innerHeight);
    smallScreen = (width < smallWidth);
    fontScale = (smallScreen) ? 3 : 1;

    // check if screen is small
    if (smallScreen) {
        $("#main").css("width", "100%");
    } else {
        $("#main").css("width", smallWidth + "px")
    }
    $("#main").css("font-size", $M.font(18));

    $API.Resize(smallWidth, someheight);
}

// $M.width
function () {
    var width = $("#main").css("width");
    return parseInt(width);
}

h番目

于 2012-08-27T04:31:38.417 に答える