カテゴリー
js

[2017.2.23]今週のJS関連

忘れてたものから調べたものまで

inputへの入力値の監視

jQueryでテキストボックスの変更を監視/検知する – Qiita
http://qiita.com/maruyam-a/items/cf0168f91d934b449a07

javascriptで数値の入力を自動的にカンマ区切りにする方法 – URAGAMI
http://blog.higty.xyz/archives/547/

まだインラインハック必要だよね

【音声対応】 iPhone Safariで動画をインライン再生する方法続き – Qiita
http://qiita.com/hadakadenkyu/items/b8accc395ccfa8348faf

video要素のループを滑らかにする – Qiita
http://qiita.com/shinnn/items/83c2493ab3bbf49b1949

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

iPhoneでvolumeいじっても値上書きできなかったmutedいじるのならきいたからとりあえずはそれで。私の記法のせいかも。
音量とミュート-JavaScript入門(HTML5編)
http://www.pori2.net/html5/Video/040.html

Promiseってなに、ってとこから///

IE爆発して?
今更だけどPromise入門 – Qiita
http://qiita.com/koki_cheese/items/c559da338a3d307c9d88

爆速でわかるjQuery.Deferred超入門 – Yahoo! JAPAN Tech Blog
https://techblog.yahoo.co.jp/programming/jquery-deferred/

Deferredな $.ajax をラップしてコールバック関数(done/fail)に共通処理を追加する – Qiita
http://qiita.com/kawanamiyuu/items/9312e5d99b2b26bd6074#-%E3%83%A9%E3%83%83%E3%83%91%E3%83%BC%E3%81%8Creturn%E3%81%99%E3%82%8Bdeferredpromise%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AEmerge%E9%A0%86%E3%81%8C%E9%80%86

カテゴリー
js

テンプレにデフォで別verのjQueryがあってコンフリクトするばあいのやーつ

(良くないけど)ページに複数のjQueryを読み込む。 – Qiita
http://qiita.com/mijabi/items/c68d27bc2ea5642675af

1画面内でバージョンの異なるjQueryを共存させるには – もやもやエンジニア

自分の記述部分以外の場所(大規模サイトのテンプレ内)に古いjQueryがあってバッティングする場合
自分の読みたいjQueryを先に読み込ませて、テンプレの物を読み込むよりまえに
上記サイトにあるようなjqueryを上書きされる前のバージョンで呼び出す記述をまるっと下記で囲む

(function ($) {

})(jQuery.noConflict(true));

あとで何処が変わるかわかんないし、テンプレのもので上書きされるようにするほうが安全かと。
でもあんまよくわかってない。

カテゴリー
js

memo jQuery.ajax()のJSONやJSONP取得で200 OKなのにエラーになる

jQuery.ajax()のJSONやJSONP取得で200 OKなのにエラーになる件のまとめ: 小粋空間
http://www.koikikukan.com/archives/2014/10/01-012345.php

カテゴリー
js

jQuery removeClass 正規表現

前にメモったはずなんだが・・・

jQueryの.removeClass()で「特定の文字列で始まるclass」をすべて削除する – Qiita
http://qiita.com/shouchida/items/01bada913bf660cdad03

カテゴリー
js

getJSON()とajax()なにがちがうのん

( ˘ω˘ ).。oO(結局ラッパーか。ajaxでええやん。)
loadみたいなもんか。

getJSON(), get(), ajax()について – 理系のためのTIPS集 @naokichick
http://d.hatena.ne.jp/kaw0909/20100507/1273232418

あとjsonpでコールバックが必要なのは今まで意識してなかったのでメモメモ。
藤岡さんに聞いて初めてへぇ〜〜〜って思った。
1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法 | iwb.jp

1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法

カテゴリー
js

bxSlider × jquery2.1.1系 バグ

ばぐある。
jquery2.0.3まで戻せば動く。

カテゴリー
js

YouTubeシンプルプレイヤーをjQueryプラグイン化しようとしてはまったpoint

なんか動かんな〜と思って調べたのでメモ書き

その1:onYouTubeIframeAPIReadyはプラグインの中に入れてはならない

http://stackoverflow.com/questions/12256382/youtube-iframe-api-not-triggering-onyoutubeiframeapiready

Make sure your onYouTubeIframeAPIReady function is available at the global level

グローバルの領域に置けって書いてます、了解っす。

その2:[player名].playVideo()が動かん

コンソール見たらObject #S has no method ‘playVideo’っていわれる

http://stackoverflow.com/questions/20249948/youtube-api-playvideo-pausevideo-and-stopvideo-not-working

you should utilize the onReady callback parameter of the YT.Player object

YT.Playerオブジェクトが出来る前に呼んでんじゃね?とおっしゃっている。
コンソールで[player名]の中身見ると先に全ての値が帰ってきていたので
そうじゃねーんだけどなーと思いつつ、onReadyで設定するとなおったのでまぁいったん詳しい話はいいですわ。どうもすみませんでした。あざます。

カテゴリー
js

jquery mousewheelをanimateを途中でキャンセルしたくなった時に使ったよ

スムーススクロールでscrollToの箇所にamimate 中にユーザーがページを移動しようとするとガクガクするのでこまった。animateをキャンセルする方法はないものか?

マウスホイールイベント上書きすればいんじゃね?

jQuery入門講座:マウスホイール :
http://www.jquerystudy.info/plugins/small/wheel.html

jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる | webOpixel : http://www.webopixel.net/javascript/435.html

ほうほうほう。

でもこれだとデフォルトのマウススクロールとの差異が気持ち悪い。
あと、animateが途中で終わっちゃうのでコールバック関数使ってたら関数もキャンセルされて立てたいフラグが立たない。

結局jquery.mousewheel.jsはよみこみつつマウスホイールイベントはキャンセルする方法で実装。
(ユーザの行動をキャンセルするのでコンテンツによってはユーザにストレスを感じさせるかもなるのでご注意を)

$('html').on('mousewheel',function(event, mov) {
	if(isTraveling || isIntrol || isScrolling){return false;}
});
カテゴリー
js

readyとloadとscrollを並列で書いていてえらー吐いた

jqueryでdomreadyとloadとscrollを並列で書いていてloadよりも先にscrollが呼ばれてえらー吐いていたことがあったのでメモ。別にloadが終わるまでみんなが待っているわけじゃないのでリフレッシュの時とかキャッシュがあるときとかはscrollが先によばれているとかそんなことなんでしょうかね

あと、リロードについてしらべてたらこんなん出てきた

君は3つのリロードを知っているか? – os0x.blog : http://os0x.hatenablog.com/entry/20110617/1308280740

カテゴリー
js

画像の読み込み中用のプログレスバーやローディング画面の実装 imagesloaded

頭の良い方の作ったファイルにジャンピング土下座ァアアアアアアアア!

いろんな書き方(jquery有り無しとか環境によって)に対応してくれて、いろんな値を返してくれる
プログレスバーの実装も可能じゃあぁああ!
(※IE7はうごきませんデシタけどね☆)
http://desandro.github.io/imagesloaded/

サンプルメモ(部分抽出)

$('body').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })
  .progress( function( instance, image ) {
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
    i ++;
    console.log( i +'/'+instance );
    console.log( instance.images.length );
  });

ほかにこんなのもあるよ☆

HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」