3 つのタブを持つ 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();
});