円形で回転するタイマーを実装できるjQueryサンプル:phpspot開発日誌
Animated Circle Timer | jQuery Plugins 円形で回転するタイマーを実装できるjQueryサンプル。 １〜１０秒の間で指定して指定秒数をかけてタイマーを回すようなものが作れます。 CSS3を使っているので非対応ブラウザでは動きませんが、なかなか面白いサンプルだったのでご紹介です デモページはこちら プラグイン形式ではないのでブラッシュアップの余地はありますが、実験や勉強用にソースを見てみてもよいかも。 タイマー秒数はソースに直接書く感じのようです 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」 ファンシーなデザインのカウントダウンタイマー実装jQueryプラグイン「Fancy Countdown」 シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」
必殺の .apply()フックを打つべし！ 打つべし！（JavaScript おれおれ Advent Calendar 2011 – 17日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 17日目 .apply()で成り済ましができたり仕事をスルーして丸投げしたりする事ができますが、さらにもうひとつ、フックを行う事ができます。 フック(hook)というのはフック船長のフック、鉤爪の事で、処理を「ひっかける」ような事です。ある関数が実行される際に、独自のコードを実行させる事ができます。 フック (プログラミング) – Wikipedia フック（Hook）は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。また、フックを利用して独自の処理を追加することを「フックする」という。 あの処理がどこで呼ばれてるかわからないときに 具体例をひとつ。例えばjQueryで「どこかのタイミングで勝手にクラス名が追加されてしまって困っている」という場合を考えます。その場合は .add
JSコードTips
// 任意の連続した文字列生成 (new Array(10)).join(‘a’); // 任意の内容で初期化された配列生成（要Underscore.js） _(_.range(100)).map(function(n) { return ‘hoge’ }); // 高速なepoch秒生成 +(Date.now ? Date.now() : new Date()) // event throttle（scrollイベントの発生を100msに1回以下に抑える） var timer; $(window).on(‘scroll’, function (e) { if (timer) { return; }; /* hoge */ timer = setTimeout(function () { timer = undefined; }, 100); }); // 最初に一回実行するsetInte
H2O Blog., jQuery Mobileで JavaScriptを記述するときはhead内に
jQuery Mobileで構築しているページにJavaScriptを記述するときは、head要素内に記述しましょう。 body要素に記述してしまうと、処理が2回走ってしまうことがあります。いくつか検証したのですが、どのようなパターンで2回発生するのかが掴み切れていませんが、次のBBSでやりとりされています。 jQuery mobile duplicated events - Stack Overflow これによると、次のプログラムで重複して走ります。 $(function() { $(‘.slide’).tap(function() { alert(‘tapped!’); }); }); これを防ぐには、スクリプトをhead要素内に記述すること。 確かに、私が作っているプログラムでもhead要素内に記述することで回避できました。jQuery Mobil
萌え萌えcss - お前の血は何色だ!! 4
http://rtilabs.net/files/2010_12_24/moemoe_css/ jquery 1.4.3 から搭載された cssHooks を利用して遊んでみました。 cssHooksを利用すると、新しい css のカスタムプロパティを作成できます。 いままで jquery で width 属性などのように、実在しない cssのプロパティを拡張したければ、動的に jqueryのメソッド書き換えるモンキーパッチを行うしかありませんでした。 クロスブラウザの回転は、 まさに jquery のメソッドを動的に置き換えで実装しています。 ところが、 jquery 1.4.3 から、 cssHooks という機能が実装され、 jqueryを経由して安全に css のカスタムプロパティを作成できるようになりました。 このことを教えてもらったので、 cssHooks を利用して まったく
今更聞けない:before :afterの使い方 - Toro_Unit
CSS2.1で定義された疑似要素、:before,:after。 しかし以外に使い方を知らないって人が多いはず。 clearfixとかで色々お世話になっているはずのbefore,afterの使い方を改めてまとめて行ければと思います。 before,afterの生成される場所 selecter:before,selecter:afterの生成される場所はhtmlでかくとここ。 [html] <selecter> <!–div:beforeの生成される場所–>hogehoge<!–div:afterの生成される場所–> </selecter> [/html] 図で表すと、こんな感じ。 また、 [css] selecter:after { content: ""; display: block; } [/css] などとCSSを書くと という感じになります。 これを使ってclearfixは作られ
FuncUnitを試してみた - Reports
FuncUnitって？ WEBアプリケーションの単体テストフレームワークです． 公式ページ: FuncUnit 基本的にはjQuery風の記法でユーザのアクションを定義し，JavaScriptの単体テストフレームワーク QUnitでアサートするだけでユーザのアクション（テキスト入力，クリック，ドラッグアンドドロップなど）に対するアプリの動作をテストすることができます． なので，jQueryとQUnitを使ったことがある人であれば比較的簡単にテストコードを書くことができます．また，どちらも使ったことがなくても使う分にはそれほど難しいものでもないので，使ってみることをオススメします． 一回書けば延々ブラウザでポチポチする作業とはおさらばです． また，もう一つ重要な点としてコマンドラインからテストが実行できるという点です（実行中にFirefoxやIEが立ち上がったりしますが）．ということはHud
実行間隔を調整する - はてなダイアリー - 無料で簡単。広告のないシンプルなブログをはじめよう！
JavaScriptDebouncing Javascript Methods | Unscriptable.com 密に処理が実行されてしまうのを避けるため、二つのかたちがあるとのこと。下のデモ。throttleは、0.5秒ごとに点の位置が変わる。debounceは、0.5秒いると赤くなる。 デモ throttleひとつ目は一定間隔以内の呼び出しは間引いて無視する方法。イベントの発生頻度が多く、処理が重い場合に使う。 Function.prototype.throttle = function(threshold, alt){ threshold = threshold || 100; var me = this; var last = Date.now(); return function(){ var now = Date.now(); if(now - last debounceも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
