javascrip：ハッシュタグからイベント情報を取得
javascriptでクリックイベントから要素のデータで情報を使いたいときjQueryのDataAPI $('div').data('hoge'); はよく使う手法ですが、シンプルに扱うにはハッシュから取った方が見やすかったりします。 毎回、忘れてしまうのでメモしておきます。 HTML <ul id="menu"> <li><a...
View ArticleCSS3を使ったマウスオーバーフリップアニメーションと非対ブラウザ用にjqueryアニメーションのサンプルソース
CSS3を使ったアニメーションは従来のjavascritpアニメーションに比べ、軽く動作が美しい、表現の幅も広いですが、非対応のブラウザの場合、とても残念になります。 今回はマウスオーバーでフリップアニメーションをCSS3で行い、非対応ブラウザは分岐で別動作をさせせるサンプルを書きます。 必要なファイル jquery.js modernizr.js HTML <script...
View ArticleYoutubeAPI インターネットエクスプローラー10でwindow.onYouTubeIframeAPIReadyがフックしないとき
IE10にて起きた現象で、YoutubeAPIのwindow.onYouTubeIframeAPIReadyが作動しない不具合がでました。 ブラウザを更新すると動作しなかったりで安定しなかったので対処法。 対処法...
View Article【YoutubeAPI】 iPhoneやAndroidでplayVideo()が再生されず、読み込み中のままになる
先日の続きです。 YoutubeのプレーヤーAPIを使って簡単な再生プレーヤーを設置したのですが一部のスマホ端末で再生できない現象が出たので調査。 まず、やっていることはyoutubeプレーヤーの全面にプレイ画像を置き、クリックしたらプレイ画像が消え動画再生が始まるという、簡単な仕組み。...
View ArticleClik here to view.
雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造
雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造します。 Versionは1.7.4です。（だと思います＾＾；） デモサイト http://loktar00.github.io/JQuery-Snowfall/ 通常の設置 $('#section').snowfall({ image :"images/flake.png", minSize:10,...
View ArticleInstagramAPI 設置メモ。自分の投稿リストを取得するだけだったのにいろいろと面倒だったので、後からの覚書。
Instagram APIの使い方がとっても面倒だったので覚書。 前提 やりたいことは自分の投稿画像のリストを取得 特定の誰か（自分含む）の投稿の画像リストを表示するのにuserIDが必要になる userIDは数字です。clientIdでもusernameでもないです。 自分のuserIDを調べるために、一度API検索をする必要があるようです。これが面倒。 使ったライブラリ...
View Articlejquery 要素の作成で第二引数でまとめて
jqueryで要素を作成するとき、第二引数を使ってプロパティ類をまとめて設定する方法。 これするといちいちaddClassやらイベントやら追記しなくて済むのでソースが綺麗になるよ。 $('', { class: 'btn btn-primary', on: { click: function (event) { } } }).html('ボタン');...
View Article【Movable Type】jqueryで新着投稿にnewマークを付ける
Movable Typeで、24時間以内の投稿は自動でNEWマークを付ける方法。 作戦 再構築をしなくても24時間を過ぎると自動で消える ↑ の理由でajax newマークの見た目や場所が一定ではないので、DOM構築はしない ↑ の理由で先にnewマークをマークアップしておいて非表示にしておく Movable Type <ul> <mt:Entries...
View ArticleClik here to view.
スクロールスパイ系js10個まとめ
スクロールに合わせて、ナビゲーションをアクティブにしたいライブラリを探してみると、たーくさんあったので、メモ。 探せばどんだけでも出てくる感じだけど、自分の求めている物になかなか辿り着けない。。 Swiper http://idangero.us/swiper/ デモ：http://idangero.us/swiper/demos/ ScrollSpy...
View Articleフォームの内容をjsonにしたい時の、jquery拡張$.fn.serializeObject()
jQueryには入力フォームの内容を文字列で返す $.fn.serialize() や、 配列で返す $.fn.serializeArray() がありますが、オブジェクト形式で取りたくてけっこー探し回ってやっとたどり着いたのでメモです。 結論 macek/jquery-serialize-object いろいろ探しまわした結果これがいい。完璧...
View Article
