• Home
  • JavaScript
  • jQueryAutoHeight.js をレスポンシブデザインで使う

jQueryAutoHeight.js をレスポンシブデザインで使う

細々と公開しているんですけれども意外と使われている「jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン」を、レスポンシブデザインのサイトで使いたいというご意見を頂きました。

PC版のときはカラムが横に並ぶので高さを揃えるといい感じになるのですが、スマホのときは1カラムになって縦に並ぶので、そこで高さを揃えてしまうと無駄に間延びしちゃうということですね。

そんなときは、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 などを横に倒したりした時にも横幅をチェックして実行し直してくれると思います。

以上です。

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。