■
町田さんが21日発売の「女性自身」に「暴行事件の全真相」として緊急寄稿
女性自身てどうなん。
prototype.jsのElement.getHeight()を利用してn個づつブロックを横に並べていく
この模式図みたいに並べていこうというお話。
静的にHTMLを書く場合は何とでもなるんですが、今回は数字を振っているブロックはプログラムの方でループで書き出してくるし、内容量も一定していない。今回みたいに5つかも知れないし、もっとあるかもしれないし、1つだけかもしれないと。
プログラム側で2つおきにclearするclassを付けるようにしてもらうというのもあるんですが、テストしてみるとIE6で3番のボックスが左にずれる。どうやら関連しているボックスのmarginかpaddingが吹っ飛んでしまうようだ。発生条件がいまいち分かってないのが痛いんだけど(自分が)。
実際にはうす緑の部分は固定幅なのでfloatは勝手に下に回ってくれるんだけど、画像の例の場合、3番は2番の下に来る。それはまずい。
最近話題のブロックレベル要素の高さを揃えるheightLine.js - to-Rも考えたんだけど、3番4番が1番と同じ高さというのも微妙。2つおきにクラスグループを設定するという手もあるけどプログラムへの要求は出来るだけ減らしたいので別の方法を検討。
clearを使わず3番が2番の下に来ないという条件を満たすのは右のボックスの高さが左のボックスと同じか大きいということ。でも、内容量が一定していないので高さはぶっちゃけ出力してみないと分からない。ということでjavascriptでやることに決定。
出力するテンプレートはこんな感じで記述
[LOOPの記述] <div class="hoge" id="****"> <div class="huga"> 内容 </div> </div> [LOOP終了の記述] ここにclearブロック
class="hoge"のブロックは内容のほうからユニークになる変数を拝借してidをつける。
class="hoge"の方にwidthやfloatの設定をしてclass="huga"の方に罫線や背景などを設定。
んでjavascriptをLOOP終了の直後に挿入。(prototype.jsは読み込み済み)
<script type="text/javascript"> >!-- function floatrewrite(){ var divAr = $$('.hoge'); for (var i = 0,len = divAr.length;i < len ; i = i + 2){ if (divAr[i + 1]){ var leftHeight = Element.getHeight(divAr[i].id); var rightHeight = Element.getHeight(divAr[i + 1].id); if (leftHeight > rightHeight){ $(divAr[i + 1].id).style.height = leftHeight + 'px'; } } } } floatrewrite(); //--< </script>
prototype.jsのElement.getHeight()を使えば表示のheightが取れるのですんなりと設定可能。
ライブラリっぽくは書いていないので「3つ並べるならここの数字を変えて…」みたいには行かないけどちょっと応用すれば何個でも対応可能かと。
javascriptのソースがかなりどん臭いような感じですがここは恥を忍んでエントリーしてみたの巻。
例によって1日2日で消えるであろうけど
しかしその直後、「こんなものに頼るな!」そう諭していた選手たちはいっせいに、
黄色のポロシャツの切れ端をポケットにしまいこみました。
相変わらず本職の方の仕事のクオリティは高いですな。
iTuneでコステロをABC順で聴いていたら
Blame It On Cain がいい曲だな。ふと順番を変えるとこういうのに気づくんだな。
というかなんでスルーしていたかを反省した方がいいのかな。
Fish 'n' Chip Paper の安っぽいキーボードの音に惚れた。
数字の6に5を足したの歌
数字の6に5を足したの歌
破壊力あるなあ。エンタに出てたんやね。
確かにこうやって入れたほうが上手に注げそう
http://wada.cocolog-nifty.com/blog/2007/03/post_c42d.html
上手に振ることが出来ればだけど。参考にしてみよう。