- 2009-12-17 (木) 11:22
- Silverlight | プログラム
先日から、amacal や NexTock の HTML版の画面を固定のヘッダーとフッターがつくような形式に変更しました。具体的にはヘッダーとフッターが固定で表示されていて、その中のコンテンツエリア全体にSilverlightのオブジェクトが表示されるものです。ブラウザの領域のサイズにおおじてコンテンツエリアが調整されます。言葉では説明しにくいので、実際の動きを見てもらうのが一番ですが、絵で説明するとこんな感じです。
もともと、HTML/CSS/JavaScript は素人なので、方法がわからなかったのですが、先日、JavaScript を使う必要があって、そのときにサイズの設定方法がわかったので、下記のコードで対応してみました。
window.onresize = ResizeSLObject;
window.onload = ResizeSLObject;
function ResizeSLObject() {
o = document.getElementById('silverlightControlHost');
o.style.height = document.body.clientHeight - 185;
}
ちなみに、“185” は、ヘッダーとフッターの高さを足したものです。
まぁ、それなりに動いていたので、細かい問題は無視していたのですが、実は、このコード、IE以外のFirefox, Safari, Google Chromeではまったく動かないことが判明。
で、あーだこーだといろいろ検索したり実験したりして、修正をかけたのが次のコード。
window.onresize = ResizeSLObject;
window.onload = ResizeSLObject;
function ResizeSLObject() {
var o = document.getElementById('silverlightControlHost');
var ft = document.getElementById('footer');
var hd = document.getElementById('header');
var h_header = hd.clientHeight;
var h_footer = ft.clientHeight;
var margin = h_header + h_footer;
var docHeight;
if (document.compatMode == "CSS1Compat") {
docHeight = document.documentElement.clientHeight;
} else if (document.compatMode == "BackCompat") {
docHeight = document.body.clientHeight;
}
var objHeight = Math.max(docHeight - margin, 300);
o.style.height = objHeight + "px";
}
ポイントは、次の2つ。
- ブラウザの表示領域を取得するのに、document.body.clientHeight ではなく、document.documentElement.clientHeightを使うこと （今回はモードで区別しています)
- オブジェクトの高さを設定するために、object.style.height を設定する場合は、”100px” のように、”px”を忘れないようにすること。
新しいコードは、メニューが2行になっても対応できますし、クライアントエリアは最低でも300px が必要なように設定しました。
関連する投稿
コメント:0
トラックバック:0
- トラックバックURL
- http://www.arugoworks.net/wordpress/wp-trackback.php?p=434
- この記事へのトラックバック
- ヘッダとフッタを固定して、コンテンツエリアにSilverlightのオブジェクトを埋め込む from Arugoworksの開発日記
