Question

我有一个页面，其中包含一个带有三个选项卡的jquery选项卡元素。在该元素中，有一个地图（选项卡1 - PolyMap），图表（选项卡2 - Devexpress）和数据网格（选项卡3 - Devexpress）。该网站本身建立在Foundation 4上，以提供响应式设计。使用基础时，页面的宽度和高度将在屏幕大小更改时更改，但实际的地图和图形元素不会更改。我实现了以下代码，以使地图和图形在屏幕大小更改时（即纵向横向）或最初加载页面时自动调整大小。

我对javascript编程相当新，所以我仍然在尝试学习浏览器之间差异的复杂性。我通常使用Chrome进行开发，因此我根据Chrome中的功能开发了代码。我遇到的问题是，当我现在在IE或Firfox（两个当前版本）中进行测试时，我得到了不同的结果。在IE中，两个元素都加载了0px高度。在Firefox中，地图正确加载（默认显示的选项卡），但图表加载的高度为0px（图表选项卡最初未显示）。如果屏幕大小发生变化，则会触发脚本并立即更正大小，因此我猜测这是使用$(window).load的问题，或者在IE或Firefox中完全加载页面之前代码正在触发（虽然我很难理解它在Chrome中是如何正常工作的。）

是否有任何建议 - 请记住，我是新手，所以如果整个代码块应该重做，我对此完全开放 - 我想学习......

代码（在关闭html标签之前立即显示）：

    function ResizeMap() {
        var mPadding = $('#MapContent').css("padding");
        mPadding = mPadding.substring(0, mPadding.length - 2);
        mPadding = mPadding * 2;
        if (MapContent.offsetWidth > 970) {
            var nWidth = 970-mPadding;
            var nHeight = 650;
        } else {
            var nWidth = MapContent.offsetWidth-mPadding;
            var nHeight = nWidth * (650/(970-mPadding));
        }
        $('#map').width(nWidth);
        $('#map').height(nHeight);
    }
    function ResizeChart() {
        var cPadding = $('#ChartContent').css("padding");
        cPadding = cPadding.substring(0, cPadding.length - 2);
        cPadding = cPadding * 2;
        if (ChartContent.offsetWidth > 970) {
            var nWidth = 970-cPadding;
            var nHeight = 650;
        } else {
            var nWidth = ChartContent.offsetWidth-cPadding;
            var nHeight = nWidth * (650/(970-cPadding));
        }
        chart.SetWidth(nWidth);
        chart.SetHeight(nHeight);
    }
    $(window).resize(function() {
        ResizeMap();
        ResizeChart();
    });
    $(window).load(function() {
        ResizeMap();
        ResizeChart();
    });

window.resize事件的麻烦

0 个答案: