レスポンシブWebデザインに対応した「jquery.heightLine.js」

このエントリーをはてなブックマークに追加

多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。

heightLine.jsとの違いとしては、

などがあります。

ダウンロード / サンプル / GitHub

利用方法

まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="../jquery.heightLine.js"></script>

次に基本的な使い方は高さを揃えたい要素をセレクタで指定して実行します。

$(".box0>div").heightLine();

これで指定したい要素の高さが揃えられます。

オプションで様々な指定が可能です。

maxWidthオプション

ウィンドウ幅640px以下の場合のみ高さを揃えたい場合はmaxWidthオプションを指定します。

$(".box1>div").heightLine({
    maxWidth:640
});

minWidthオプション

ウィンドウ幅640px以上の場合のみ高さを揃えたい場合はminWidthオプションを指定します。

$(".box2>div").heightLine({
    minWidth:640
});

maxWidthオプション / minWidthオプション

ウィンドウ幅500px以上、700px以下の場合のみ高さを揃えたい場合はminWidthオプションとmaxWidthオプションの両方を指定します。

$(".box3>div").heightLine({
    maxWidth:700,
    minWidth:500
});

fontSizeCheckオプション

fontSizeCheckオプションを指定するとフォントサイズが変更された際も高さを再設定します。

$(".box4>div").heightLine({
    fontSizeCheck:true
});

destroyメソッド

設定されたheightLineを取り除きたい場合はdestroyメソッドを利用します。

$(".box0>div").heightLine("destroy");

refreshメソッド

コンテンツの内部が変更された場合などはrefreshメソッドで再度高さの設定が可能です。

$(".box0>div").heightLine("refresh");

関連エントリー

スクロールストップイベントを実装するjQueryプラグイン「jquery.scrollstop.js」
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
ページ内リンクをスマートにするsmoothScroll.js

スポンサードリンク

«iOSにおけるviewportの指定方法による細かい違い | メイン | JavaScriptライブラリをbowerに登録する»

このエントリーのトラックバックURL
コメント

いつもありがとうございます。
これからもいいもん期待してます。

投稿者:4e | 2013年10月21日 18:53

大変、便利なJavaScriptライブラリ、ありがとうございます!
厚かましい質問で大変、申し訳ございません。
自分の環境だけかも知れませんが、safari7で画像がある場合に上手く高さを取得出来ないようで高さが揃いません。
どうしたら良いのか、よろしければ教えてくださいませ。

投稿者:初心者です^^; | 2013年11月 8日 17:32

レスポンシブで利用させていただきたく思っています。

768px以上(PC)ならjsを有効にしそれ以下なら無効にしたく下記のように書きました。

$(function(){
if ($(window).width() > 768) {
$('#faq-block .case').heightLine();
}
});
$(window).resize(function(){
if ($(window).width() > 768) {
$('#faq-block .case').heightLine();
} else {
$('#faq-block .case').heightLine('destroy');
}
});

これで、ウインドウ幅を変更してみましたがウィンドウのリサイズによってうまく機能が切り替わりません。
※リロードすると有効・無効の操作が正しく行われます。

うまく機能させるにはどのように書けば宜しいでしょうか?

投稿者:masa | 2014年1月 6日 17:39

masaさん、

以下のコードで動きませんか?

$("#faq-block .case").heightLine({
minWidth:768
});

投稿者:西畑一馬 | 2014年1月 7日 14:16

>初心者です^^さん

以下のようにload時にスクリプトを実行するとうまくいくと思います。

$(window).on("load",function(){
$(".box0>div").heightLine();
});

投稿者:西畑一馬 | 2014年1月 7日 14:17

西畑さま

解決出来ました!
本当にありがとうございました!

投稿者:初心者です^^ | 2014年1月 7日 16:51

お世話になっております。
便利なプラグインを無料で公開して頂きありがとうございます。

ちょっとした不具合を発見しました。
このjsが効いている所は、CSS3のボックスシャドウが切れてしまう様です。

投稿者:たかはし | 2014年1月24日 02:26

こんにちは。
いつの間にかjQueryバージョンができていたのですね!
以前のバージョンでは大変お世話になりました! heightLine.jsに救われた案件は数知れずです!!

ところで商品リストなど、動的に生成されるli要素を二つずつ同じ高さにそろえたい場合、
以前のバージョンを使っていた時は


ul { width: 1000px; }
li { width: 500px; float: left; }

  • ・ ・ ・
(liごとに極端に高さが異なるため、単純に一番高さのあるコンテンツに高さを合わせると間延びしてしまう場合など)

などとクラスを自動的に振るようにしていたのですが、jQuery版だとどのようにすればいいのでしょうか?
吐き出されるクラスに対して、すべて手動で適用しなければいけないのでしょうか?


投稿者:ももた | 2014年4月22日 22:59

便利なスクリプトなどありがとうございます。
jquery.heightLine.jsですが、
box-sizing: border-box;
に対応していないようで、高さがボーダー分だけ足りなく表示されるようです。

javascriptなどはド素人なのですが、すこしjquery.heightLine.jsを改変してみたところ、うまく高さが揃うようになりました。

http://qitailang.small.jp/misc/equal_box/
一番下の方にサンプルページへのリンクがあります。

指定の仕方の問題かscriptの問題か分かりませんが、時間がありましたら、拙サイトを覗いていだだけましたら幸いです。

投稿者:Ida | 2014年10月20日 16:35

お世話になっております。
下記の文字サイズを変更できるjsと併用しようと考えています。
http://web-mugen.com/javascript/jquerynochangecssfontsizechange/

こちらのjsで文字を拡大した時に、うまく高さを取得できないようで揃ってくれません。
何か解決方法はありますでしょうか。お願い致します。

投稿者:オガワ | 2014年12月 3日 12:03

jquery.heightLine.js、大変活用させて頂いております。
どうもありがとうございます。

『jQueryデザイン入門』で勉強中の、jQuery超初心者です。本を参考にして作ったアコーディオンパネルの中で、heightLine.jsを使いたいのですが、なかなかうまくいきません…。(1回目にアコーディオンを開く時は正しく表示されるのですが、次に別のアコーディオンを開くと、下部が切れたように表示されてしまいます。)

ここ数日格闘して、アコーディオンパネルが開いた後に、heightLine.jsを実行できれば正しく表示されるのではないかとは思うのですが…。

お忙しい中大変恐縮ですが、何かアドバイスをいただけますと大変助かります。どうぞよろしくお願い致します。

投稿者:happytack | 2015年4月28日 21:22
コメントを投稿