[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>Divの高さを合わせるスクリプト(safari対応版)
Divの高さを合わせるスクリプト(safari対応版)
先日のエントリーDivの高さを合わせるスクリプトではsafariで動作しなかったが何とか解決。
やっぱりsort部分が良くなかったようだ。とはいえsort自体は機能するので自分の書き方がおかしかったのが原因なんだろうけど。とりあえず
Javascript
- //配列を昇順でソート
- idHeight.sort(
- function Func(a, b){//ソートのための比較関数
- return (b - a);
- }
- );
部分を下記のように変えればOK
Javascript
- //ソートのための比較関数
- function Func(a, b){
- return (b - a);
- }
- idHeight.sort(Func);
その他↓のようにやっても動きます。
javascript サンプル
恥ずかしすぎるミス・・・2008/01/18修正。
Javascript
- 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サンプル
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サンプル
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以外にも利用できるかと思われ。
| 投稿日 | 2007年10月26日 12:26 |
|---|---|
| カテゴリ | JavaScript |
| タグ | インターフェイス | サンプルコード |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1124 |
コメント
からGuestへの返信
コメントありがとうございます。
実用的ではありませんが、呼び出し時に高さを揃えたい要素を
指定できるようにしましたのでご参照ください。
からcaquuへの返信
管理人さん
有難う御座います！！！
これは、大変便利です。
で、横並びのリストを作るテクニックをよく見かけます。
というか、一般的なのかもしれません。
お時間のある時、「DL 横並び」で検索を掛けて見て下さい。
しかし、あくまでも、は、の高さを超えない事を想定したものが多く、
万が一超える場合は、意味の無い
を側に連続で入れたり、
クラスを割り当て、と同じ行数にしてやる必要がありました。
なので、このスクリプトは大変便利だと思います。
からcaquuへの返信
getelementsbytagnameだと、一つ（'DD'）しか、指定出来ませんか？
('DT','DD'）だと出来ないみたいですね。すみません、素人過ぎて。
からGuestへの返信
こんにちわ。
getElementsByTagnameでは、複数のタグのリストは取得できませんが
dl内という条件かつモダンなブラウザであれば、
kantenna.fitHeight(document.querySelectorAll('dl > *'));
という方法も可能です。
dlに限らず色々なタグに対応させたい場合は
http://www.kantenna.com/codes/fitHeight/flatten
をご参照ください。
kantenna.fitHeight()は1次元配列にしか対応してないので、
複数の配列を1次元配列にするarrayFlatten()という関数を追加してみました。
Guest
2012年7月 6日 13:38 | 返信
検索で飛んできました。
これは素晴らしいですね。
id指定となっていますが、DT DDなど、タグに直接していする場合も、
教えて頂ければ幸いです。