レスポンシブ対応スライダー 「Swiper」
2019年02月04日
「Swiper – Most Modern Mobile Touch Slider」の使い方メモ。 ナビゲーション・ページネーション付きスライド デモ コード HTML <div class="swiper-demo-1 swiper-container" id="swiper-demo-1"> <div class="…続きを読む
タグ: javascript
MW WP Form v4 で Vue.js 2.x の UI コンポーネント Element を利用する
2018年04月02日
WordPress のフォームプラグイン MW WP Form の v4 でフィールドを書き換えることができるようになっていたので、Vue.js 2.x の UI コンポーネントの Element を使って datepicker をカスタマイズしてみる。 プラグインディレクトリからフィールド定義ファイルをテーマにコピーして書き換える。 wp/wp-content/plugins/mw-wp-for…続きを読む
AngularJS でループ外のスコープにアクセスする
2013年11月28日
AngularJS: input.radio のサンプルを参考にして、ng-repeat を使って input をループで作ろうとしたら、結果の出力が変わらない状態になってしまった。 ng-repeat がスコープを生成するために、ng-model に設定した変数がスコープ内のローカルなものになってしまうためらしい。 そこで、$parent を使うと親のスコープへアクセスすることができ、結果の出力…続きを読む
Vim で JsHint による JavaScript コードチェックを自動化する
2013年04月09日
JsHint を使って Vim で JavaScript のコードチェックを行った際のメモ。 MacPorts で Node.js をインストールする $ sudo port install nodejs MacPorts で npm をインストールする パッケージ管理ツールの npm をインストールする。 $ sudo port install npm npm で jsHint をインストールす…続きを読む
jQuery, DOM の操作メソッドの挙動の違いについて
2010年08月29日
jQuery の DOM 操作メソッドの挙動の違いについてのまとめ。 以下の例の DOM 要素に対して、jQuery の DOM 操作メソッドを使って処理を行い、その挙動の違いについて調べてみた。 <div id="box" class="box"> <div>サンプルテキスト1</div> <div>サンプル…続きを読む
ツールチップをスライドアップして表示する jQuery plugin slideupTooltip
2010年05月25日
指定した HTML の要素にマウスホバーすると、隣接するツールチップのレイヤー要素をスライドアップして表示することができる jQuery plugin を作った。 <p>mouse over <span class="note">me!</span><span class="tooltip0">hello, w…続きを読む
メールアドレスをエンコードするブックマークレット
2010年05月22日
メールアドレスの文字列をランダムに数値文字参照形式にエンコードするブックマークレット。 Encode Mail Address javascript:(function(){var a=prompt(‘input your mail address’,”);if(a.length!==0){for(var b=”,c=0,d=a.length;c<d;c++)b+=a[c]===’@’?…続きを読む
JavaScript, Canvas スキャンライン・シードフィル アルゴリズムによる塗り潰し
2010年05月06日
HTML5 Canvas でバケツツールによる塗り潰しを実現するために、スキャンライン・シードフィル (Scan Line Seed Fill) というアルゴリズムを使ってみた。 アルゴリズムの詳細については、以下のサイトを参考にした。 参考：ActionScript入門Wiki@rsakane – 塗りつぶしアルゴリズム(スキャンライン – シードフィル編) ペイン…続きを読む
JavaScript, apply/call メソッドと prototype 継承
2010年04月26日
こちらのサイト『JavaScriptで継承やるときにprototype書きまくるのめんどい人は – あ、いしかわですね』で Function.apply を使って継承を記述する方法が紹介されていた。 apply と call の使い方を今一度復習しておく。 Function.apply function.apply(obj, args) function を obj のメソッドとして呼…続きを読む
JavaScript, Canvas で putImageData による劣化を調べる
2010年04月23日
Ubuntu 9.10 (karmic Koala) の Google Chrome で JavaScript, Canvas の putImageData を使ってイメージの書き戻しをしていたら、イメージの色がどんどん黒っぽく変化してきた。 こちらのサイト『りす穴さくら: lislis Paintの技術的説明まとめ』によると Google Chrome では putImageData によって色…続きを読む