jQueryで高さの調整
コンテンツ量が少なく、footerが上にきてしまっている
というときjQueryを使ってきちんと下部に表示するようなスクリプトを書いてみた。
htmlはdiv#header、div#main、div#footerという構成を前提にします。
これら3つの高さがウィンドウサイズより小さかった時に、#mainの大きさを指定するっていうこと。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript"> jQuery(document).ready(function(){ var winHeight = jQuery(window).height(); var headHeight = jQuery('#header').height(); var mainHeight = jQuery('#main').height(); var footHeight = jQuery('#footer').height(); var fullHeight=mainHeight+headHeight+footHeight; if (fullHeight <= winHeight) { var wrapHeight = winHeight-headHeight-footHeight; jQuery(function() { jQuery('#main').height(wrapHeight); }); } }); </script> |
うむ。
どうして「$」じゃないかって？
それは、「エラーになった」からです。
コンフリクトっていうんでしょうか。
他のプラグインではいけてるっぽいんですが。
でも、まー、うまくいってるから良しとします。
１つの手段として、有効であれば・・・
4月 1st, 2010 at 09:49
はじめまして、これからjQueryを勉強してみたいと思っている初心者ですが、とても参考になりました。
大変面白いです！
ブックマークに入れました。よろしくお願いします。
4月 3rd, 2010 at 01:41
nao様
ありがとうございます。
私もまだ勉強中なのですが、
読んでくださっている方がいらっしゃると励みになります。
今後も、ボチボチとやっていきますので、よろしくお願いいたします！
4月 3rd, 2010 at 21:22
はじめまして。jQueryをかじり始めたものですが、ちょっと気になる点を。
.height()でのheightの取得は余白(margin/height)が含まれないので
.outerHeight({margin: true})で取得し、spaceHeightという変数を作った後、
wrapHeightから引いてやると、余白も考慮できて尚良いかと思われます。
あと、if文の比較演算子は以下(<=)ではなく未満(<)で良いかと。
一見にしかずと言うことでコードをどうぞ。
2
3
4
5
6
7
8
9
10
11
12
13
14
var winHeight = jQuery(window).height();
var headHeight = jQuery("#header").outerHeight({margin: true});
var mainHeight = jQuery("#main").outerHeight({margin: true});
var footHeight = jQuery("#footer").outerHeight({margin: true});
var spaceHeight = mainHeight - jQuery("#main").height();
var fullHeight = mainHeight + headHeight + footHeight;
if (fullHeight < winHeight) {
var wrapHeight = winHeight - headHeight - footHeight - spaceHeight;
jQuery("#main").height(wrapHeight);
}
});
4月 6th, 2010 at 00:46
何事も、色々調べて実現していくのは大変だと思います。
今後も参考にさせてください。楽しみにしています。
4月 8th, 2010 at 23:46
FMJP様
初めまして。
お返事が遅くなってもうしわけございません。
そうなんですね！outerHeight({margin:true})っていうんがあるんですね。
何にもわからず、全くお恥ずかしい・・・・
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(document).ready(function(){
var winHeight = jQuery(window).height();
function resizeHeight(e) {
var headHeight = jQuery('#header').outerHeight({margin:true});
var mainHeight = jQuery('#main').outerHeight({margin:true});
var footHeight = jQuery('#footer').outerHeight({margin:true});
var spaceHeight = mainHeight – jQuery('#main').height();
var fullHeight=mainHeight+headHeight+footHeight;
if (fullHeight < winHeight) {
var wrapHeight = winHeight-headHeight-footHeight-spaceHeight;
jQuery(function() {
jQuery('#page').height(wrapHeight);
});
}
}
jQuery(window).bind("load",resizeHeight);
jQuery(window).bind("resize",resizeHeight);
});
</script>
ってな具合が本来はいいんでしょうかね？？
ああ、私も、もっとプログラム脳が欲しいです。
勉強になります！
4月 14th, 2010 at 14:54
ダブルクオテーションと小なりがエスケープされちゃいましたね。
それはいいとして、余白を考慮しなくて良いなら.height()でいいんですが、
#header等にpaddingやmarginが1px以上設定されているとその分fullHeightの値が小さくなり、
結果wrapHeightが無駄に大きくなってしまう（きっちりハマらない）、というわけです。
比較演算子のところは、未満(<)でなければ処理を行う必要がないので、
以下(<=)では無駄な処理を行わせてしまうことになります。
あと、jQuery(function(){}はjQuery(document).ready(function(){}の省略形です。
jQuery('#main').height(wrapHeight);を囲っている部分は不要かと。
最後に、.bind()でresizeHeight関数を呼び出した時
var winHeight = jQuery(window).height();が外にあるので、
正しく動作しないと思いますよ。最大化した場合にwinHeightが更新されないため。
逆の場合はelse{jQuery('#main').height('auto');}を追加すればOKです。
4月 14th, 2010 at 23:26
FMJP様
たびたび、ありがとうございます。
>var winHeight = jQuery(window).height();が外にあるので、
確かに、そうですね！外にある・・・リサイズしても、結局最初にロードした時の高さ、ってことですよね？？
しっかりやらんといけんです・・・
感謝です。
>ダブルクオテーションと小なりがエスケープされちゃいましたね。
これは、私が見やすくしようと思ってコードビュー的なものにしたのが原因です。
ごめんなさい。
4月 15th, 2010 at 23:51
＞リサイズしても、結局最初にロードした時の高さ
その通りです。
コメント6
＞逆の場合はelse{jQuery(‘#main’).height(‘auto’);}を追加すればOKです。
これについて、IEはフリーズし、Operaでは思った動作をしません。
そんなわけで、この一文は撤回します。
この記事でjQueryを勉強する機会ができましたから、
こちらこそ感謝します。現在、自サイトを構築中なので完成したらお知らせします。
また交流しましょう。