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以外にも利用できるかと思われ。

改訂第4版 JavaScript ポケットリファレンス

著者 : 古籏 一浩 / 金額 : ￥ 2,499

kantenna.com 最新更新ページ

Divの高さを合わせるスクリプト(safari対応版)タグ:

トラックバック

  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/388
[WEBプログラム覚書]2008年06月29日 04:57
Divの高さを揃える方法 (css版)
CSSでDivの高さを揃える方法
[WEBプログラム覚書]2009年01月29日 17:00
Divの高さを合わせるスクリプト
Javascriptを利用してDivの高さを合わせる
コメント (0)
コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)





この情報を登録しますか?