jQueryでanimationがうまく動かない件

こんな感じで大雑把にanimationを設定していると

jQueryとバッティングしてしまい、期待通りの動きをしません。

jQueryでアニメーションをつける時は、cssのtransitionは干渉しないように要素を限定しておきましょう。
もしくはjQueryに任せて、cssでは書かないなどのルールを決めたほうがいいかもしれません。

jqeuryで先祖要素が取得できない時

parent()を使ってないでしょうか
parents()を使います

parent()は直上の親1つだけ取得
parent(“.hoge”)なら親がhogeクラスの要素を保つ場合のみ取得できます
parents(“.hoge”)の場合も同じで、先祖にhogeクラスを持つ要素全てを取得します
parents(“*”)はparents()と同じです

jQuery環境で画像ポップアップ(lightbox)はどれを使えば良いか

素直にlightbox2がオススメです。jQuery1.11系で動きます。
fancybox…最新jQueryで動かない。具体的には1.6以下で動きます。しかしjQueryのバージョンを下げることに寄る弊害のほうが大きいため、避けたほうが無難でしょう。
bumpboxは様々なファイル形式に対応していてとても便利なのですが、prototype.jsを使用します。jQueryと競合するので避けたほうが良いです。
他にも色々とありますが、主に上記二点(jQueryの旧バージョンでないと動かない・prototype.jsを使用する)に注意して選んで下さい。

jQueryを強制的に読み込ませる方法

コンソールからJSを走らせる時、jQueryが無い場合があります。
そこで一旦jQueryを読み込ませてからjavascriptを走らせます。
以下がコードになります。

jQueryでselect要素、option要素の中からテキスト・文字列で選択する方法

例としてこんなselect要素、option要素があるとします。そして青森を選択したい。

青森のvalueが何かわからない、不定、未定と言った場合はどうすればよいか。

探しても見つからなかったので自分で作りました。

以下を使って下さい。

使い方は、
text_selector(“親のセレクタ”,”optionで表示されている文字列”);
です。

$.eachで回してテキストが同じなら親のselectのvalueに設定しているだけです。

なぜ$.eachで回すかというと、containsは文字列比較で「~を含む」というセレクタなので、「青森」で検索すると「青森県」も引っかかってしまうためです。

何故か文字列比較の等号、無いんです。

 

ちなみにselectとoptionで、valueを直接選ぶのは簡単。青森が2とわかっていれば

#(“optionAreaL”).val(“2”)

とするだけでok。

以上です。

jQueryでクリックしたことにする

フォームに文字を入力する時「input要素をクリックする動作」を検知するサイトがたまにあります。

inputをクリックせずに直接javascriptで

$(“input”).val(“text”)、送信を押してもうまくいかないことがあります。

そんな時はtriggerを使います。

$(“input”).val(“text“);
$(“input”).trigger(‘click’);

clickだけでなく、changeや

$(“input”).trigger(‘change’);

マウスオーバーも使えます。

$(‘input’).trigger(‘mouseover’);

 

これで広告をクリックしたことにすると、当然のように収益は没収されますので絶対にやめましょう。

javascriptで全ての外部リンクにイベントトラッキングを付ける

まずはコードから

以上で す。

では、解説です。

1行目、4行目の

$(document).ready( function () {
})

これはhtmlを読み終えてから実行、の意味。htmlを読み終える前に実行するとa要素が読み込まれる前に実行してしまうので、相当変わったことをしない限り必須であるといえるでしょう。

2行目。

$(“a[href^=http]”).not(“a[href*='”+location.hostname+”‘]”).attr(“onclick”,”_gaq.push([‘_trackEvent’, ‘link’, ‘click’, this.href,,’true’]);”);

少しずつ分解してみていきましょう。

$(“a[href^=http]”).not(“a[href*='”+location.hostname+”‘]”)

この部分がセレクタになります。

$(“a[href^=http]”).

「aタグのhref属性がhttpで始まる」の意味です。

更に^=は文字列の比較で「始まりが~」の意味。今回は始まりが”http”です。

divやtable、h1他のタグや、aタグであっても内部リンクはこれで候補から外れます。

 

.not(“a[href*='”+location.hostname+”‘]”)

notは真偽の偽の意味。つまりカッコ内に当てはまらないもの、の意味。

a[href*='”+location.hostname+”‘]

location.hostnameは要するにドメイン部分。このサイトだと「15g.jp」になります。

更に更に*=は文字列の比較で「含まれる」の意味。

合わせて「aタグのhref属性に自分のドメインが含まれない」の意味です。

またコーテーション、ダブルコーテーションが混ざってますので気をつけて下さい。

 

続いて後半

.attr(“onclick”,”_gaq.push([‘_trackEvent’, ‘link’, ‘click’, this.href,,’true’]);”);

attrは属性の追加、”onclick”はクリック時の動作。

カスタマイズできるのはココ

_gaq.push([‘_trackEvent’, ‘link’, ‘click’, this.href,,’true’])

は元々以下のようになっています。

_gaq.push([‘_trackEvent’, ‘category’, ‘action’, ‘opt_label’,opt_value,’opt_noninteraction’]);

_gaq.push・・固定値。変更不可能

_trackevent・・固定値。変更不可能

category・・カテゴリー。linkclick、linkなどの名前にします。

action・・clickなど。

opt_label・・要するに名前。ですが全てに名前をつけるなんて面倒です。確実にそこにあるもの、URLの指定が無難です。this.hrefとすれば外部リンクへのURLとなります。

opt_value・・整数の値。広告の単価などを入れると良いですが、今回は必要ないので何も入れていません。

opt_noninteraction・・直帰率に影響します。これをfalseにすると、内部リンクを踏むのと同じ効果になり、直帰率が下がります。ですがそんなことで直帰率を下げてもしかたがないので素直にtrueを指定。指定しなくてもtrueになります。

 

また

$(“div.ex”).attr(“onmouseover”,”_gaq.push([‘_trackEvent’, ‘link’, ‘click’, this.href,,’true’]);”);

こうすれば<div class=”ex”>内にマウスカーソルが乗った時の数を計測できます。