[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>Divの高さを合わせるスクリプト
Divの高さを合わせるスクリプト
tableでは簡単な高さあわせだが、CSSレイアウトの場合なかなか難しく背景などが途中で切れてしまうことが多々ある。
もちろん大枠で囲んでやればいいわけだが、Javascriptを利用して高さそろえるのもありかも。
Javascriptサンプル
指定したIDで一番高いものにその他の高さを合わせます。
Javascript
- <script language="javascript" type="text/javascript">
- //<![CDATA
- //左右コンテンツの高さあわせ（高いほうに）
- window.onload = function(){
- //高さ合わせるIDを指定
- var id = new Array("jsLeft", "jsCenter", "jsRight");
- var idHeight = new Array();
- //指定IDの高さを取得
- for(i=0; i<id.length; i++){
- idHeight[i] = document.getElementById(id[i]).offsetHeight;
- }
- //配列を昇順でソート
- idHeight.sort(
- function Func(a, b){//ソートのための比較関数
- return (b - a);
- }
- );
- //一番高いのに合わせる
- for(i=0; i<id.length; i++){
- document.getElementById(id[i]).style.height = idHeight[0] + "px";
- }
- }
- //]]>
- </script>
HTML
- <div id="jsHeight01">
- <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>
- </div>
CSSサンプル
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はデータベースです。
IE7、Mac IE5.5、Firefox2.0.0.8、Netscape7.1で動作確認。問題はsafariで動かないこと(爆
とりあえずプロトタイプということで近いうちになんとか原因突き止めたいところですが・・・
どーもsortあたりが怪しいっぽい・・・
| 投稿日 | 2007年10月24日 16:03 |
|---|---|
| カテゴリ | JavaScript |
| タグ | インターフェイス | サンプルコード |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1122 |
コメント