jQueryAutoHeight.js をレスポンシブデザインで使う
jQueryAutoHeight.js をレスポンシブデザインで利用するときのTipsを紹介します。
細々と公開しているんですけれども意外と使われている「jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン」を、レスポンシブデザインのサイトで使いたいというご意見を頂きました。
PC版のときはカラムが横に並ぶので高さを揃えるといい感じになるのですが、スマホのときは１カラムになって縦に並ぶので、そこで高さを揃えてしまうと無駄に間延びしちゃうということですね。
そんなときは、jQueryAutoHeight.js を実行するところで、以下のように横幅の最小値を設定し、その最小値とウィンドウサイズを比較して実行するかリセットするかを分けてあげれば良いと思います。
<script type="text/javascript">
jQuery(function($){
var minWidth = 450;
$(window).resize(function(){
if (minWidth <= $(this).width()) {
$('div.box').autoHeight();
}
else {
$('div.box').removeAttr('style');
}
}).trigger('resize');
});
</script>
minWidth の値を適宜設定してください。
このように .resize() を使えば、iPhone などを横に倒したりした時にも横幅をチェックして実行し直してくれると思います。
以上です。
Published 2014-03-08
, Updated 2019-06-25
, Updated 2019-06-25