Hatena::ブログ(Diary)

jiroの日記 このページをアンテナに追加 RSSフィード

2007-08-28

[]ブラウザの画面を100%使い切ってページを表示する

デスクトップアプリケーションを開発していると、ウィンドウの大きさに合わせてウィンドウのメイン部の中身の大きさが動的に変わったりします。しかし、Webアプリケーションでは、なかなかそういう風に作ったりはせずに、画面が小さければ、スクロールバーで移動することが多いです。

でも、やっぱりそういう事をしたいときもあるので、ブラウザの画面の高さを100%使い切って表示してみます。

とりあえず動かしてみる

とりあえず動作画面。表示したウィンドウを大きくしたり小さくしたりしてみてください。真ん中の部分が大きくなったり、小さくなったりしていると思います。

ポイント

標準化されていないもののJavaScriptではViewPortを取得する事ができます。クロスブラウザ用のソースコードはここを参照させていただきました。

var getViewPort = function() {
 	var width, heiht;
 	if (self.innerHeight) {
		// all except Explorer
		width = self.innerWidth;
		height = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		// Explorer 6 Strict Mode
		width = document.documentElement.clientWidth;
		height = document.documentElement.clientHeight;
	} else if (document.body) {
		// other Explorers
		width = document.body.clientWidth;
		height = document.body.clientHeight;
	}
	return {width: width, height: height};
}

このviewportを利用すると、現在表示できる幅と高さを取得する事ができるので、そこから、headerとfooterの高さを引きます。そうすれば、main部の高さを算出できるので、style.heightにその高さを設定してあげる事によって、表示部を100%使い切る事ができます。

var resize = function(event) {
	var main = document.getElementById('main');
	var viewport = getViewPort();
	var height = viewport.height - 200; // 200 = header.height + footer.height
	main.style.height = (height <= 0 ? 0 : height) + 'px';
}

resizeとloadイベントにリスナーを設定

高さが変わるときは、resizeイベントのときなので、resizeイベントに関数を設定します。また、最初の表示時にも呼ばれるようにloadイベントにも設定をしておきます。これで、ブラウザの画面を100%使い切って表示するページの出来上がりです。

CSSのみでトライ

結果からいうと、Firefox, Safari, Operaでは問題ないのですが、IEがだめでした。

ソースコードはこれ

CSSではtopとbottomを指定すると、heightを自動的に算出してくれます。ですので、JavaScriptが必要ないのですが、IEではtopを指定するとbottomが無視されるというバグがあるため、うまく動いてくれません。これをなんとかできれば、JavaScriptがいらなくなって良いんですけど。。。

追記:resize関数の中でheightがマイナスになってしまう事があったので修正しました。

2007-08-22

[]教室で盛大にゲロを履いた

教室で盛大にゲロを履いた」が、面白い。面白いよ。続きが早くみたい!!

なんとなく友達にかぶる

2007-08-14

[]JavaScript 第5版が素晴らしい件

JavaScript 第5版

JavaScript 第5版

この本を読んでいます。既に、danさんやid:amachangさんは読んだようですが、まだまだ読み終わりません。まだ途中なのですが、この本は素晴らしいです。

まず、今まで、私が知らなかったようなスコープチェーン、書籍で語られる事のなかったJavaScriptで走査するCSS、SVG、VML、そして描画領域のCanvas等について網羅的に書かれています。danさんがおっしゃっているように、今までJavaScriptは学びやすい書籍がなかった。しかし、これからはこの本さえ読めばこれらの知識をつける事ができるという点で、勉強の道ができたんではないでしょうか。これからはJavaScripterが増えるんでしょうか。そういう私は暦は浅いので偉そうな事は言えません。。。


で、たしかに、初心者がJavaScriptを初めて読むには少し難易度が高いと思いますが、もっていて必ず損はないと思います。明日も電車の中で読もう。

2007-08-08

[]id:amachanさんのプレゼンツールが凄い&functionの書き方

id:amachangさんのプレゼンツールが凄い。こういうのが欲しかったんです。

で、本題はそこではなく、そのソースコード。できればid:amachangさんに答えてもらえないかと。。。

functionの書き方は2種類じゃない?

今まで知らなかったんですけど、javascriptでfunctionの定義の仕方は次の2つしかないと思っていました。

var hoge = function() { alert(arguments.callee); };

// または

function hoge() { alert(arguments.callee); }

上の方は匿名functionで名前がついていない関数なので、実行すると

hoge();

// function() {

// alert(arguments.callee);

// }

と表示されます。

もう一方を実行すると

hoge();

// function hoge() {

// alert(arguments.callee);

// }

となります。で、自分はこの二つしか定義方法がないと思っていたのですが、そのプレゼンツールのソースを見たところ

var hoge = function fuga() { }

のようなことをしています。正直、このコードを見たときはびっくりしました。

これって何してるんだろう

で、どこを調べたらこのコードのような文法が許されるのか分からなかったので、Firefox限定ですが挙動を調べてみました。

まず、

var hoge = function fuga() {alert(arguments.callee);}

hoge();

// function fuga() {

// alert(arguments.callee);

// }

となりますが

var hoge = function fuga() {alert(arguments.callee);}

fuga // undefined

となりました。

つまり、関数名としてfugaを使用するけれども関数のポインタを関数名に代入せず、hogeに代入するという事でしょうか。

なお、Safari 2.0ではこの構文使えないみたいです。

疑問が残るのですが、このような構文を使うメリットは何なのでしょうか?できればid:amachangさんに答えていただければなぁと思うのですが、、、

リクエストに応えてもらえますかねぇ

2007-08-06

[]ビリーズブートキャンプの経過

ビリーズブートキャンプを3週間連続で続けています。まぁ2日程休んでしまいましたが…


で途中経過の発表です。体重は68キロ前後を行ったりきたり。正直体重に変化はありません。でも以前よりは気持ち身体が引き締まった気がします。それと体調に変化がありました。

・寝起きが良くなった

・便通が良くなった

・やる気がでてきた

・フットサルをやっても死にそうにならなくなった

良いことばかりですね。さて、家に着いたので今からはじめますか!

2007-08-04

[]DIVの高さを1pxに設定

そうそう、この前DIVの高さを1pxに設定していたんだけど、何故かIEだけおかしい表示になってしまう。

おかしいなぁと思っていろいろ調べていたら、どうやら、IEでは文字の高さ分を確保してしまうらしく、

style="height: 1px"

の指定が効かないらしい。じゃあどうすれば良いのかというと

style="height: 1px; overflow: hidden"

とすれば良い。要ははみ出した分(1px以外の部分)についてはhiddenで隠してしまうようにする。

もちろん、他のブラウザでもoverflowがhiddenになっていたところで、何も問題ない。

だって、そもそもはみ出さないからね。

まぁ普通に知れている事だと思うけど、一応記述しておく。

2007-08-03

[]東方神起

この前から気になってることがある。新宿の丸の内線の西口改札にある広告が新しくなったのですよ。なにやら男のアイドルグループらしい。知らなかったから今調べてみたら東方神起という韓国のグループみたい

で、その前で女の子達が写真をとりまくってるのよ\(゜□゜)/

しかも一人とかじゃなくてたくさんの人たちが撮ってる。しかも通るたびにみかけるし!なんで?!こんなこと思ってしまうのはおじさんになった証でしょうか…

Connection: close