モーダル表示で何かと便利なColorboxだが、iOSのSafariだと、ウィンドウがが縦センターじゃなく上の方に出る。どうも、表示時のアニメーションが原因らしい。
なので、’transition’を’none’にしてアニメーションを切ってみたら、ちゃんと出てきた。（デフォルト値は’elastic’）
$(".colorbox").colorbox({transition:"none"});カテゴリー: JavaScript
古いスマホでe.preventDefault()が効かない件
ちょっと古いスマホ（iPhone5SとかAndroidの4.x 辺り）のブラウザだと、e.preventDefault()が効かないので、a タグの処理が走ってしまう….
で、ググったりテストしたりして、分かったこと。
- onClickだと、どうやっても無理。
- onTouchEndでも、どうにも無理。
- onTouchStartなら行けそう！
- e.stopPropagation()はなんか、効くっぽい。
って事で、以下の様な感じにしたら、なんとか動いた。
$('a').on("touchstart",function(e){
e.preventDefault(); ←普通はこれでキャンセル
e.stopPropagation(); ←問題スマホは、これでキャンセル
//処理内容
}
線を描くアニメーション
Canvasでサクッと描画できるのはいいけど、描画過程を見せたくて、線を引っ張る過程をアニメーションさせる方法を模索中。
始点のと終点の座標から、角度と線分の長さを割り出し、始点から終点に向かって、ちょっとづつ線を描いては消す…ってのを繰り返すってだけがが、そこそこ成功。
なお、描画にはタイマー関数ではなく、「requestAnimationFrame」を使ってます。
肘の位置を調べる
ふと思う所があって、手先の座標から肘の座標を調べる方法を調べてたら、そのものズバリな師匠サイトがあった。
>>三角形の２点の座標と各辺の長さから、残る１点の座標を求める
説明も理解できないままに、素直にサンプルスクリプトをJavaScriptに置き換えて試してみたら、上手く行った。
そして、未だに仕組みは分からない。
HTML5ビデオをJavaScriptでシンクロさせてみる
サイト上で、動画とコンテンツのシンクロができるか…ってことでやってみた。
HTML5 Video Synchro Test
作り方は極めてシンプルで、videoタグで貼られた動画はタイムが変更されると
timeupdate
イベントが発行されるので、これを拾って、どうこう処理すれば良いだけだった。
こんな感じ
$("Video ID").on("timeupdate",function(){
var xTime = this.currentTime //現在の再生時間
if(xTime >= 10.0 && xTime < 11.0){
console.log("10秒たった！");
}
});
その他のイベントは、この辺を見てみてください。