jQuery : 森のコーディング

2月5

paddingも含めた要素の高さをjqueryで出したい

たとえば、

<div class="hoge">にゃんにゃん</div>

という要素があったとして、この要素の高さを出そうと思ったら
こうしますよね。

var nyanHeight = $('.hoge').height();

でもこの.hogeの上下にpaddingがかかっていたら？
例えば、padding:10px 0;などがかかっていても、padding分を計算してくれません。

heightが20pxだとしたら、上下の10pxを含めると見た目上は40pxになるわけですが、

上記のjqueryでは、nyanHeight は20になっちゃいます。

では、paddingも含めた高さはどうやって出すのかというと、

outerHeight();

リファレンスはこちら

var nyanHeight = $('.hoge').outerHeight();

これでpadding分も含まれた数値がとれるよ！

2月2

ページの読み込みが完全に完了してからjsを動かす

例えば、ページのある要素のサイズを取得したいときなんかで困る事がある。

それは、まだ要素が読み込み終わってないのにサイズを取得しちゃうために、
想定よりも小さい数値でとっちゃうっていう。

日常的にはあまり起きないのだけど、ファイルをいろいろ読んでて重くなってるときなんかはおきたりする。

その解決法はこちら

window.onload = function() {
処理
}

window.onloadは、htmlもimgもその他の要素もすべて読み込み終わって、見た目がそろった後に発動するもの。
最後の最後に発動するヤツ

それに対して、普段つかっているjQueryの基本文

$( function(){
処理
})

というのは、DOMができたタイミングで発動する。
ページの構造ができた段階で発動するから、外部ファイルを読む前に動き出す。

このへんの、厳密な順序というのは僕もわかってないので、
勉強しなきゃなと思いつつ、
（このへんが詳しそう。
　http://www.yoheim.net/blog.php?q=20140703）

とりあえず描画前にjsが動いちゃって困ってる時は
window.onloadって覚えておくんだぜ

11月18

jquery.validate.jsでチェックボックスを必須化して、最低ひとつはチェックしないとエラーがでるようにする

フォームを作ってると必ず出てくるのが「必須」ってやつ。
必須項目を入力しなかったらエラーになるってやつね。

そこで便利なのが、jquery.validate.jsだ。
落としてくるにはこちら

使い方はいろいろ検索して探してもらうとして、問題はチェックボックス。

チェックボックスを複数並べて、「少なくとも1つはチェックをいれてね」っていうパターンのアンケート式のフォームを作りたいことはよくあると思う。

其の用途では、jquery.validate.jsでは直感的に、そのままでは使えないので、そのやり方を書くよ。

①チェックボックスのnameは配列にするんだよ

チェックボックスが複数並ぶ場合、nameの中身をそれぞれ別々にしている人もいるかもしれない。（僕はそうだった。）
それを、配列の形にする

<input type="checkbox" name="cat[]" value="日本猫">日本猫
<input type="checkbox" name="cat[]" value="アメショー">アメショー
<input type="checkbox" name="cat[]" value="スコティッシュ">スコティッシュ
<input type="checkbox" name="cat[]" value="ロシアンブルー">ロシアンブルー

こんな風にcat[]とする。catの部分は配列名なのでなんでもいい
そうすると、チェックを入れられるたびに、cat[]の中に入っていく。

②validateで設定をしていく

validate.jsを使っている時はhtml内にこんな1文のjsを書いているはず。

$("#contactform").validate();

これで<form id="contactform>に対してバリデート機能をつけてるわけだね。

このvalidate()の中にいろいろな設定を追加していくことができる

$("#contactform").validate({
ここにいろんな設定を書いていける
}) ;

んで、実際に書いていくのはこういうやつ
↓ほぼほほコピペでいける

$(document).ready(function(){
$("#contactform").validate({
rules:{
'cat[]': {required: true} //①
},
messages :{
'cat[]':{required: "猫の種類を選択してください"} //②
},
errorPlacement :function(error,element){
if (element.attr("name") == "cat[]" ) error.insertAfter("#error");　//③
else (element.attr("name") == "name" ) error.insertAfter(element);
}
});
});

まずは最初のオブジェクトであるrulesに1文いれるのが①
「cat[]は必須やで」ってこと。
cat[]は「'」で囲むのが大事。これだけで、最低1つの要素がcat[]の中に入ってないとエラーを出せる。

次にエラーの時のメッセージを出す為の設定messagesオブジェクトに②を書く。
まぁこれは見れば分かる。

ここまでで機能としてはできてるんだけど、ひとつ大きな問題が起こる
それは、

チェックを入れなかった時のエラーが、最初のチェックボックスの直後に出て、レイアウトが崩れちゃう

ということ。

それを解決するために③が必要になる、errorPlacementというのは、エラーを出す場所を決めるやつ。

③のif文を丁寧に追っていくと、
「要素のname属性がcat[]になってるやつのエラーは#errorのところに出せ」
って意味ね。
<div id="error"></div>でも作っておけば、そこにチェックボックスのエラーを出すことができる。

ここで超注意点があって、エラーをだすための出し先は、#で指定しないと動かない。
<div class="error"></div>　にしておいて.errorに指定しても動かないので、スーパー注意だよ！
（僕はこれで30分を失ったよ）

そして最後に、elseで、書かれているように
「それ以外の場合は、フォームの要素の直後にエラーを出してOK」っていうのを書いておしまい。

複数のチェックボックスを置いて、
どれかひとつは必須選択してね、っていうフォームをつくりたいときにコピっとくと便利と思う！

そんじゃ、アメショー！

9月8

colorboxでのinlineがうまく表示されないエラーでスムーススクロールが原因説

colorboxありますよね。
モーダルウィンドウを組込むのに汎用性が高いので、lightbox系ではよく使います。

んで、ページ内のhtmlをモーダル内に表示させたい時、
inlineを使うのですが、なんかうまくいくときとうまく行かない時がある。

何が原因なんだーと思ってずーっと調べてたらスムーススクロールjsとバッティングしてるってことがわかりました。
jquery.smoothScroll.js

ってやつね。

これとcolorboxのinlineを同時に使うと、モーダルが開かない。

解決策は簡単だった。

<a href="#inline_box" class="inline" data-tor-smoothScroll="noSmooth">クリック</a>

上記のように、 data-tor-smoothScroll="noSmooth"をつければOK！

完！（ご愛読ありがとうございました！）

なぜこんなことになるんだぜ？

スムーススクロールというのは、ページ内リンクに対して発動させるよね？

<a href="#contents3">コンテンツ３</a>

などとやると、id="contents3"がついているところまでビューンする。

一方colorboxのinlineの指定は以下のような感じ

<a class='inline' href="#inline_content">いでよ！</a>
<div style='display:none'>
<div id="inline_content">
モーダルウィンドウの中身
</div>
</div>

href="#inline_content"の部分がぶつかっちゃうわけですね。

なので、 jquery.smoothScroll.jsのほうに用意されてる
スムーススクロールさせない指示
data-tor-smoothScroll="noSmooth"
をつければ、#inline_contentのほうは、スムーススクロールのほうでは使われずに、colorboxさんが気持ちよく使えるんだ。

7月14

[jQuery]appendなどで追加した要素にはclickやhoverがきかないのを解決する

appendなどで動的に要素を追加したとき。
追加された要素にclick()を指示しても動かない。

これは.on()を使うことで解決する。

■clickの場合

動かないやつ

$('#btn').click(function(){
console.log("成功！");
});

動くやつ

$(document).on('click','#btn',function(){
console.log("成功！");
});

■hoverの場合

動かないやつ

$('#btn').hover(function(){
console.log("マウスのったー！");
},
function(){
console.log("お、おりたー！");
});

動くやつ

$(document).on('mouseenter','#btn',function(){
console.log("マウスのったー！");
});
$(document).on('mouseleave','#btn',function(){
console.log("お、おりたー！");
});

それにしても.onのリファレンスってまともなのが見当たらないというか、
event一覧がちゃんと乗ってるのがみあたらなくて困った。

だれか見つけたらおしえとぅ

2014年07月14日14:40
tacshock
コメント:0

森のコーディング

jQuery

paddingも含めた要素の高さをjqueryで出したい

ページの読み込みが完全に完了してからjsを動かす

jquery.validate.jsでチェックボックスを必須化して、最低ひとつはチェックしないとエラーがでるようにする

colorboxでのinlineがうまく表示されないエラーでスムーススクロールが原因説

[jQuery]appendなどで追加した要素にはclickやhoverがきかないのを解決する

お仕事のご依頼・お問い合わせはこちら