Author Archives: ake_nyanko

jquery.flatheights.jsを使ってボックスの高さを揃える際、高さ指定の無い画像が含まれているとwebkitでボックスがつぶれてしまうということについて前回記事を書きましたが、その後@mattari_pandaさんの協力でとりあえず解決に至りました。

var _UA = navigator.userAgent.toLowerCase();
if(parseInt(_UA.indexOf('applewebkit')) > -1){
$(window).load(function(){
$('.box1').flatHeights();
});
}else{
$(function(){
$('.box1').flatHeights();
});
}

こんな感じでwebkitの場合は実行タイミングを「load」にしてやることで画像の高さを取得してくれるようになります。UAで分岐しないで全て「load」にしてもできるのですが、そうすると問題の無いブラウザでの表示パフォーマンスを無駄に落とすことになりますのでUA分岐しています。

ボックスを格子状に並べて一覧表示する際、どうしても高さを揃えたいというのは当たり前の要求だと思います。
ところがCSSレイアウトの場合、隣り合うボックスの高さを揃えるということが案外大変です。
中身が画像などで高さが確実に固定できる場合はheightを指定すればいいだけなので問題ありませんが、
中身が可変コンテンツだった場合、ボックスから中身がはみ出してしまったりする危険があるため単純にheightを指定するわけには行きません。
しかもECサイトなどで商品一覧が動的に書き出されてくるような場合、何がどのような順番でいくつ書き出されるのか全く特定できないため、手動で高さを揃えてやることも不可能です。
そういう場合に威力を発揮するのがボックスの高さを揃えるためのJavaScriptです。
有名なものは
・heightLine.js
・jquery.flatheights.js
の２つだと思います。
これらは非常に便利で、私もよく利用させていただいています。
特に最近は２つ目のjquery.flatheighs.jsがお気に入りです。
が、このJS、思わぬ落とし穴がありました！それは、
子要素にheightが指定されていない画像が含まれているとボックスがつぶれて表示されてしまう（webkitのみ）
ということです。
普通はhtmlの属性かcssで画像のwidth・heightを指定するはずなので問題ないのですが、
サイズがバラバラの画像をプログラムで書き出すようなサイトの場合、個別の画像のwidth・heightを指定することが困難になるので敢えて指定しない、という判断を下すこともあると思います。
そういう所にこのjquery.flatheights.jsを使っていると、ブラウザが画像のサイズを取得して表示する前に高さを揃えようとしてしまうため、画像の高さが無い状態でボックスの高さを揃えてしまいます。
滅多にある状況ではないと思いますが、そういう状況も考えられなくもないので、このJSの利用を考えている方は一応注意した方がよいと思います。
ちなみにheightLine.jsの方だとどうなるか、というのは検証していないのでわかりません（汗）