• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2015/02/23

横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵


高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。

でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。

jquery.matchHeight.js – a more robust equal heights plugin for jquery

動き

簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。

デモページ

使い方

使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.matchHeight.js"></script>
  <script>
    $(function(){
      $('.js-matchHeight').matchHeight();
    });
  </script>
</head>
<body>
  <div class="js-matchHeight">foo</div>
  <div class="js-matchHeight">bar</div>
  …(中略)
  <div class="js-matchHeight">baz</div>
</body>

でOK。.js-matchHeightのクラス名は適宜で。

他に詳しい使い方はGithubページにありますのでご覧になってくださいませ。

今まさに業務で望んでいる動きが得られたので感涙しております。

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×