mania-ku

何か作りたいプログラマ未満。

【jQueryプラグイン】高さを揃え&レスポンシブ対応のjquery-match-heightがすごい便利

高さをそろえる系プラグインは色々試してきましたが、最近見つけたliabru/jquery-match-height · GitHubが大変便利です。
幅が変わって横に並ぶ数が変わっても、高さを合わせてくれるのです!レスポンシブサイトを作るときは大変便利です:)

メリット

  • ・レスポンシブで列の数が変わっても、その列で自動に高さを揃えてくれる
  • ・padding,margin,border,box-sizingに対応
  • ・非表示の要素は無視してくれる
  • ・IE8+に対応
  • ・削除できる
  • ・正しいスクロール位置を維持する
  • ・必要なときに高さを更新することもできる

デメリット

デモ:jquery-match-heightデモ – js do it

【jQuery】「Uncaught Error: Syntax error, unrecognized expression: [name=]」というエラーが出たら

$('input[name='text']');

のような内側外側の引用符が同じことが原因です。
jQueryの仕様が変わって、エラーが出るようになったみたいです。

修正の方法は【jQuery】引用符とエスケープを覚える | mania-kuをどうぞ。

【IE】隣接したarea移動時にマウスオーバーが途切れないようにする

以下のようなHTMLとjQueryのとき、mapにareaが複数あると隣接していてもIEでは移動時にmouseoutとmouseoverが起きてしまいます。

<!--html-->
<img src="http://jsrun.it/assets/o/l/f/d/olfdl.gif" alt="" usemap="#link"><!--画像-->
<map name="link">
    <area shape="rect" coords="0,0,137,100" href="http://google.co.jp" alt="Google"><!--area1-->
    <area shape="rect" coords="138,0,275,100" href="http://yahoo.co.jp" alt="Yahoo"><!--area2-->
</map>
//js
$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,1);
});

解決策

jQueryの動作の前に.stop()を追加します。

$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,1);
});

【jQuery】引用符とエスケープを覚える

jQueryで引用符(シングルクオート(’)とダブルクオート(”))を使う時にエスケープが必要になるときがあります。

内側と外側同じ引用符を使って、内側をエスケープ(\)する

$('a[href=\'http://mania-ku.info\']') //シングルクオート(')とエスケープ(\)
$("a[href=\"http://mania-ku.info\"]") //ダブルクオート(")とエスケープ(\)

エスケープがめんどくさい!なら内側と外側で別の引用符を使う

こちらの方が簡単だと思うのですが、どうなんでしょうね?

$('a[href="http://mania-ku.info"]') //外側はシングルクオート(')で内側はダブルクオート(")
$("a[href='http://mania-ku.info']") //外側はダブルクオート(")で内側はシングルクオート(')

【jQuery】クリックイベントで一部だけ別の動作をさせる

下記のようなHTMLがあるときに、spanだけ別の動作をさせたいときに使うjQueryの覚え書きです。
qiitaでいろいろ教えてもらいました。

<p><span class="icon">ここは別の動作をさせる</span>ここは普通の動作をさせる</p>

クラス名で指定:$(e.target).hasClass(クラス名)を使う

$("p").click(function(e){
    if($(e.target).hasClass("icon")) {
        //.iconだけ別の動作
    } else {
        //普通の動作
    }
});

属性で指定:$(e.target).attr(属性)を使う

複数クラスを指定する場合は、.hasClass(クラス名)を使う

$("p").click(function(e){
    if($(e.target).attr("class") == "icon") {
        //.iconだけ別の動作
    } else {
        //普通の動作
    }
});

要素名で指定:$(e.target).get(0).tagName==要素名を使う

$("p").click(function(e){
    if($(e.target).get(0).tagName == "span") {
        //spanだけ別の動作
    } else {
        //普通の動作
    }
});

いちいち覚えるのが大変なときは、$(e.target).is(要素)を使う

$("p").click(function(e){
    if($(e.target).is(要素)) {
        //クラスでも、
        //属性でも、
        //要素名でも使えるので便利!
    } else {
        //普通の動作
    }
});

【jQuery】親要素を削除するunwrap()

下記のようなHTMLのときに、pをクリックしたら親のdivを消したいときはどうすればいいのでしょうか?

<div>
	<p>ここをクリックする</p>
</div>

remove()ではない

jQueryで削除と言えばremove()ですが、これでは子以下も削除してしまいます。

$('div p').click(function(){
	$(this).parent().remove(); //divとその中身が全て消えちゃう
});

unwrap()を使う

親要素だけを削除したい場合はどうすればいいのでしょうか?
jQuery1.4系以降だとunwrap()が使えます。

$('div p').click(function(){
	$(this).unwrap(); //divだけを消す
});

デモ

参考サイト

親要素のみ削除する方法[jQuery1.4系版] | THE HAM MEDIA BLOG

【Advent calendar】jQueryプラグイン作成で躓いたこと

これはadvent calendar4日目の記事です。
3日目の昨日は電子絵本サービス『PIBO(ピーボ)』にお問い合わせをした話でした。

先日ドットインストールのjQueryプラグイン入門で勉強したあと、初めて自作プラグインを作った中で躓いたことがありました。

オプションをcssのプロパティに使いたい!でも動かないorエラーが出る

要素がfixedだったりして左右の位置をオプションで決めたいときなんかに、オプションをプロパティに使いたいですがこれではエラーが出てしまいます…
変数に入れてもダメでした

//プロパティにオプションをつっこむと、エラーでる
elements.css({
~省略~
    opts.pos: 0,
~省略~
});

//変数にオプションつっこむと、動かない
var opts_pas = opts.pos;
elements.css({
~省略~
    opts_pas: 0,
~省略~
});

//.css({})じゃなくて、.css()だと動いた!
elements.css(opts.pos, 0)
もしくは
var opts_pas = opts.pos;
elements.css(opts_pos, 0)

Uncaught TypeError: Illegal invocationというエラーが出た!

.css()の書き方を間違えたため起こりました。シングルクォートで囲んだらエラーが消えました。
普段.css({})しか使わないので…

.css(top, ***)
↓
.css('top', ***)

Object 数値 has no method ‘match’というエラーが出た!

他のmatchを使った場所では起きてないため調べたところ、matchした文字列のところに数値が入っていました。数値を文字列化したらエラーが消えました。
文字列化参考サイト:JavaScriptにおける数値と文字列の相互変換

String(数値)

5日目の明日はjQueryプラグイン作成で気をつけたいところです。
ほんじゃーね;)

【IE10】jQueryのslideToggleアコーディオンしたときの背景のバグ

jQueryのslideToggleでアコーディオンしたときに、IE10で背景画像が何重にも重なって見えることがありました。
IE10になってまで、こんなことが起きるとは思わなかったですね・・・
調べてみたところ、でもこれも同じ現象っぽいですね・・・

解決方法(2種類)

  • ・クリックする要素にdisplay: inline-block;追加する(stackoverflowだとこちら)
  • ・背景画像を指定したところにdisplay: inline-block;追加する
    (今回対処した方法。クリックする要素に付けられなかったので)

【jQuery】スムーズスクロールと何かのバッティングをどうにかする

スムーズスクロールしてるページでtabとかを使うとがバッティングします。
そういえばどちらともアンカーがトリガーですね。

対処方法

スムーズスクロールがjQueryのanimateを使った(下のような)コードだったら

$('html,body').animate({scrollTop: ***}, ***);

tabとか切り替えるクリックイベントのコードに下記を追加すればいいみたいです。
一回覚えると簡単ですね!

$('html,body').animate().stop();

【jQueryプラグイン】IEでdisplay:boxができるJS、flexiejsができる子だった。

CSS3でdisplay:boxっていうのがあります。
直下のブロック要素要素が横並びかつ、同じ高さになるというもの。
直下のブロック要素要素にbox-flexも同時に使って、%を使わず幅ぴったりに要素を並べることもできます。

これは便利なんですが、IEで使えません・・・
そんなときはdisplay:boxを使っているHTMLでflexiejsを読むだけ(jQueryを読んでいなかったら、flexiejsの上で読む)
なんということでしょう。。。display:boxがIEでも再現されてる!
フラットデザインやレスポンシブデザインなんかに使えるんじゃないでしょうか。

ダウンロード
デモ