スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーをはてなブックマークに追加
この記事にトラックバックする(FC2ブログユーザー)
http://roka404.blog84.fc2.com/tb.php/8-a8ba87c9

トラックバック

コメント

[C2] 補足

この現象、Safari、ChromeなどのWebkitで見られるようです。FireFoxやIEは問題無いです。JSの仕様というよりブラウザの仕様なのかな?
  • 2011-01-13 13:03
  • akemix
  • URL
  • 編集

[C3] No title

まさにこの問題で悩んでいました。よーーやく解決です。ありがとうございます!
  • 2011-02-02 19:36
  • cseiwa
  • URL
  • 編集

[C4] 高さ指定無し画像の対策

記事がお役に立ったようで何よりです!
実行タイミングをreadyからloadに変更してあげることで
高さが指定されていなくてもボックスがつぶれることは無くなりました。
その辺に関してまた後日記事を書こうと思いますので、
よかったら参考にしてくださいね。
  • 2011-02-09 16:35
  • akemix
  • URL
  • 編集
コメントの投稿
管理者にだけ表示を許可する

高さ揃えJavaScriptの落とし穴

ボックスを格子状に並べて一覧表示する際、どうしても高さを揃えたいというのは当たり前の要求だと思います。
ところがCSSレイアウトの場合、隣り合うボックスの高さを揃えるということが案外大変です。
中身が画像などで高さが確実に固定できる場合はheightを指定すればいいだけなので問題ありませんが、
中身が可変コンテンツだった場合、ボックスから中身がはみ出してしまったりする危険があるため単純にheightを指定するわけには行きません。
しかもECサイトなどで商品一覧が動的に書き出されてくるような場合、何がどのような順番でいくつ書き出されるのか全く特定できないため、手動で高さを揃えてやることも不可能です。

そういう場合に威力を発揮するのがボックスの高さを揃えるためのJavaScriptです。
有名なものは

heightLine.js
jquery.flatheights.js

の2つだと思います。
これらは非常に便利で、私もよく利用させていただいています。
特に最近は2つ目のjquery.flatheighs.jsがお気に入りです。


が、このJS、思わぬ落とし穴がありました!それは、
子要素にheightが指定されていない画像が含まれているとボックスがつぶれて表示されてしまう(webkitのみ)
ということです。

普通はhtmlの属性かcssで画像のwidth・heightを指定するはずなので問題ないのですが、
サイズがバラバラの画像をプログラムで書き出すようなサイトの場合、個別の画像のwidth・heightを指定することが困難になるので敢えて指定しない、という判断を下すこともあると思います。
そういう所にこのjquery.flatheights.jsを使っていると、ブラウザが画像のサイズを取得して表示する前に高さを揃えようとしてしまうため、画像の高さが無い状態でボックスの高さを揃えてしまいます。

滅多にある状況ではないと思いますが、そういう状況も考えられなくもないので、このJSの利用を考えている方は一応注意した方がよいと思います。

ちなみにheightLine.jsの方だとどうなるか、というのは検証していないのでわかりません(汗)



関連記事
スポンサーサイト


このエントリーをはてなブックマークに追加
この記事にトラックバックする(FC2ブログユーザー)
http://roka404.blog84.fc2.com/tb.php/8-a8ba87c9

トラックバック

コメント

[C2] 補足

この現象、Safari、ChromeなどのWebkitで見られるようです。FireFoxやIEは問題無いです。JSの仕様というよりブラウザの仕様なのかな?
  • 2011-01-13 13:03
  • akemix
  • URL
  • 編集

[C3] No title

まさにこの問題で悩んでいました。よーーやく解決です。ありがとうございます!
  • 2011-02-02 19:36
  • cseiwa
  • URL
  • 編集

[C4] 高さ指定無し画像の対策

記事がお役に立ったようで何よりです!
実行タイミングをreadyからloadに変更してあげることで
高さが指定されていなくてもボックスがつぶれることは無くなりました。
その辺に関してまた後日記事を書こうと思いますので、
よかったら参考にしてくださいね。
  • 2011-02-09 16:35
  • akemix
  • URL
  • 編集
コメントの投稿
管理者にだけ表示を許可する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。