Divの高さを合わせるスクリプト(safari対応版)
パーマリンク | 2007年10月26日 12:26
先日のエントリーDivの高さを合わせるスクリプトではsafariで動作しなかったが何とか解決。
やっぱりsort部分が良くなかったようだ。とはいえsort自体は機能するので自分の書き方がおかしかったのが原因なんだろうけど。とりあえず
//配列を昇順でソート
idHeight.sort(
function Func(a, b){//ソートのための比較関数
return (b - a);
}
);
部分を下記のように変えればOK
//ソートのための比較関数
function Func(a, b){
return (b - a);
}
idHeight.sort(Func);
その他↓のようにやっても動きます。
javascript サンプル
恥ずかしすぎるミス・・・2008/01/18修正。
window.onload = function(){
//高さ合わせるIDを指定
var id = new Array("jsLeft", "jsCenter", "jsRight");
var idHeight = new Array();
var maxHeight = 0;//追記
//指定IDの高さを取得
for(i=0; i<id.length; i++){
idHeight[i] = document.getElementById(id[i]).offsetHeight;
}
//最大の高さをmaxHeightに格納
for(i=0; i<id.length-1; i++){
/*ここ間違い
maxHeight = Math.max(idHeight[i], idHeight[i+1]);
*/
maxHeight = Math.max(maxHeight, idHeight[i]);
}
//一番高いのに合わせる
for(i=0; i<id.length; i++){
document.getElementById(id[i]).style.height = maxHeight + "px";
}
}
HTMLサンプル
<div id="jsLeft">
<h5>Javascript</h5>
<p>Javascriptはクライアントサイドで動作するプログラムです。</p>
<p>柔軟な言語のせいかいろいろな書き方があってわけわかりません。</p>
</div>
<div id="jsCenter">
<h5>PHP</h5>
<p>PHPはサーバサイドで動作するプログラムです。</p>
<p>
PHP5は本格的なオブジェクト指向言語となり、PHP4のサポートも2007年いっぱいで終了のようですので<br />
PHP5に乗り換えたいのですが現在レンタルサーバはPHP5に対応しているところはあまりないので躊躇してしまいます。
</p>
</div>
<div id="jsRight">
<h5>MySQL</h5>
<p>MySQLはデータベースです。</p>
</div>
CSSサンプル
#jsLeft, #jsCenter, #jsRight {
float: left;
width: 200px;
padding: 5px;
}
#jsLeft {
background-color: #CCCCCC;
}
#jsCenter {
background-color: #000000;
}
#jsRight {
background-color: #993300;
}
実行結果
Javascript
Javascriptはクライアントサイドで動作するプログラムです。
柔軟な言語のせいかいろいろな書き方があってわけわかりません。
PHP
PHPはサーバサイドで動作するプログラムです。
PHP5は本格的なオブジェクト指向言語となり、PHP4のサポートも2007年いっぱいで終了のようですので
PHP5に乗り換えたいのですが現在レンタルサーバはPHP5に対応しているところはあまりないので躊躇してしまいます。
MySQL
MySQLはデータベースです。
- 動作確認済みブラウザ
- WIN:IE7、Firefox2.0.0.8、Netscape7.1/Mac:IE5.5、safari
Divの高さを合わせるってタイトルですが、指定IDの高さを合わせるって感じなのでDiv以外にも利用できるかと思われ。
Divの高さを合わせるスクリプト(safari対応版)タグ:
トラックバック
- http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/178
2008年06月29日 04:57
- Divの高さを揃える方法 (css版) [WEBプログラム覚書]
- CSSでDivの高さを揃える方法 >> 詳しくはこちら
最新更新ページ
- 2008/09/08sprintf()メモ
- 2008/09/05一定時間でsession終了メモ
- 2008/08/203ds MAX プラグイン Greeble
- 2008/08/13RSS 3Dデータ
- 2008/07/09PHP ファイルのオープンと読み込み
