KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > Divの高さを合わせるスクリプト(safari対応版)

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

先日のエントリーDivの高さを合わせるスクリプトではsafariで動作しなかったが何とか解決。

やっぱりsort部分が良くなかったようだ。とはいえsort自体は機能するので自分の書き方がおかしかったのが原因なんだろうけど。とりあえず

Javascript
  1.  //配列を昇順でソート
  2.  idHeight.sort(
  3.   function Func(a, b){//ソートのための比較関数
  4.   return (b - a);
  5.   }
  6.  );

部分を下記のように変えればOK

Javascript
  1.  //ソートのための比較関数
  2.  function Func(a, b){
  3.   return (b - a);
  4.  }
  5.  idHeight.sort(Func);

その他↓のようにやっても動きます。

javascript サンプル

恥ずかしすぎるミス・・・2008/01/18修正。

Javascript
  1.  window.onload = function(){
  2.   //高さ合わせるIDを指定
  3.   var id = new Array("jsLeft", "jsCenter", "jsRight");
  4.   var idHeight = new Array();
  5.   var maxHeight = 0;//追記
  6.   //指定IDの高さを取得
  7.   for(i=0; i<id.length; i++){
  8.   idHeight[i] = document.getElementById(id[i]).offsetHeight;
  9.   }
  10.  
  11.   //最大の高さをmaxHeightに格納
  12.   for(i=0; i<id.length-1; i++){
  13.   /*ここ間違い
  14.   maxHeight = Math.max(idHeight[i], idHeight[i+1]);
  15.   */
  16.   maxHeight = Math.max(maxHeight, idHeight[i]);
  17.   }
  18.  
  19.   //一番高いのに合わせる
  20.   for(i=0; i<id.length; i++){
  21.   document.getElementById(id[i]).style.height = maxHeight + "px";
  22.   }
  23.  }

HTMLサンプル

HTML
  1.  <div id="jsLeft">
  2.   <h5>Javascript</h5>
  3.   <p>Javascriptはクライアントサイドで動作するプログラムです。</p>
  4.   <p>柔軟な言語のせいかいろいろな書き方があってわけわかりません。</p>
  5.  </div>
  6.  
  7.  <div id="jsCenter">
  8.   <h5>PHP</h5>
  9.   <p>PHPはサーバサイドで動作するプログラムです。</p>
  10.   <p>
  11.   PHP5は本格的なオブジェクト指向言語となり、PHP4のサポートも2007年いっぱいで終了のようですので<br />
  12.   PHP5に乗り換えたいのですが現在レンタルサーバはPHP5に対応しているところはあまりないので躊躇してしまいます。
  13.   </p>
  14.  </div>
  15.  
  16.  <div id="jsRight">
  17.   <h5>MySQL</h5>
  18.   <p>MySQLはデータベースです。</p>
  19.  </div>

CSSサンプル

CSS
  1.  #jsLeft, #jsCenter, #jsRight {
  2.   float: left;
  3.   width: 200px;
  4.   padding: 5px;
  5.  }
  6.  #jsLeft {
  7.   background-color: #CCCCCC;
  8.  }
  9.  #jsCenter {
  10.   background-color: #000000;
  11.  }
  12.  #jsRight {
  13.   background-color: #993300;
  14.  }

実行結果

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

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
作者:Douglas Crockford | 価格:￥ 1,890
投稿日 2007年10月26日 12:26
カテゴリ JavaScript
タグ インターフェイス | サンプルコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1124

トラックバック(2)

2008年6月29日 04:57

Divの高さを揃える方法 (css版)WEBプログラム覚書

CSSでDivの高さを揃える方法続きを読む

2009年1月29日 17:00

Divの高さを合わせるスクリプトWEBプログラム覚書

Javascriptを利用してDivの高さを合わせる続きを読む

コメント

コメントする
Name
Email Address
URL
PAGE RANK
TIME LINE
2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.27

検索エンジンにやさしいパンくずリストのコーディング

ってなんだ。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24

[Ubuntu11.10]Windows XPとUbuntuのデュアルブート環境

いろいろあってUbuntuをインストールすることに。

2012
01.23

MinGW+Mintty+Git

MinGW+Mintty+Gitをやろうとして失敗に終わった。このエントリーには収穫できるものはありません。

2012
01.21

[PHP]共有サーバーユーザーのためのPEARインストール方法

共有サーバーでは自由にPEARのパッケージがインストールできないので、 プロジェクトローカルに設置することになりますが、以前httpベースのものを使ってみたんですけど、 やたら重くて使い物にならなかったので、僕は普通にFTPでアップするようにしてます。

ってことでプロジェクトローカルへのPEARのインストール方法。

Tags