テキストや数字をスロットの様に回転させるJavaScript「ODOMETER」＆jQuery「a simple jquery slot machine effect」「tally_counter」｜BLACKFLAG
Webページ上のテキストや数値を表示する演出で スロットマシンの様な回転アニメーションの必要性に駆られた事がこれまでに何度かあり その度に苦労していたのですがとても簡単に同様のアニメーションを実装することができる スクリプトがあったので自分用メモとして紹介してみます。 Odometer – Transition numbers with ease Odometer – Transition numbers with ease 開始値と終了値とアニメーション時間を設定するだけで 簡単にスロットマシンのような回転アニメーションを実装できる「Odometer」 （jQueryを使わずに使用できます） デモページでは様々なテーマパターンが紹介されていて CSSを切り替えるだけで簡単に見た目を選択することが可能なようです。 数字だけでなくテキストも回転させることが可能になっているので スロットマシン
jQuery 画像の一部を切り抜きできるプラグイン【jCrop】 – 切り抜き（トリミング）画像の出力保存まで | Stronghold Archive
どうもこんにちは。Toshikuraです。今回のTipsは【jQuery 画像の一部を切り抜きできるプラグイン【jCrop】 – 切り抜き（トリミング）画像の出力保存まで】です。今回記事化する【jCrop】はアップロードした画像や特定の画像をトリミングする最も便利なプラグインの一つかと思います。設置も簡単でなおかつトリミング後の画像保存出力まで実装可能です。ユーザーに画像をトリミングさせる必要が有る際には使ってみてもいいかと思います。 実装方法 まずは【jCrop】からプラグインファイルをダウンロードする必要があります。その後以下のようにCSSファイルとJSファイルを事前に読み込ませます。 事前読み込み <link href=’css/jquery.Jcrop.min.css’ rel=’stylesheet’ type=’text/css’> <script type="text/jav
IE8でアップロードに失敗する問題 - モーグルとカバとパウダーの日記
とあるWebアプリでIE8からだとアップロードが出来ない、という相談を受けました。 javascriptというかjQueryを利用して、ajaxでファイルをアップロード出来るのですが、IE8だと動かないというものです。 javascriptのソースを調べてみると、FormDataというクラスが利用されており、これはいわゆるHTML5なクラスのため、IE9以前だと使えないということがわかりました。 IE9以前でこういう用途の場合だとiframeを使って送る手法で実現するようです。 IE9以前でもアップロード行えるようにするjQueryプラグインは以下のようなものがありました。 jQuery File Upload Demo jquery.upload-1.0.2.js 今回自分は、よりシンプルな jquery.upload.js をベースに修正して利用したのですが、最近はメンテされていないよ
俺のJSライブラリの世界観(2014末版) - Qiita
http://qiita.com/advent-calendar/2014/frontrend 概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。 今日はライブラリの名前しか出さないんで各自ググるように。 立場 サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニア このサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない すまんな 他ってなんだろうな 言語 CoffeeScript TypeScript 最近DDDっぽい構成を目指し
一定時間で繰り返す（setTimeout）－JavaScript入門
HOME JavaScript入門 一定時間で繰り返す（setTimeout） 前のページではsetInterval()を使ったタイマー設定について見ました。 このページではもう一つのタイマー設定方法、setTimeout()について説明していきます。 setTimeout()を使ったサンプルスクリプト setTimeout()は設定時間後に関数を呼び出す命令文で、 それ自体では繰り返しは起こりません。 例えば以下のスクリプトをHTMLのBODY内に書いてみてください。 3秒後にメッセージが表示されて終わりになります。 <form> <input type="button" value="Timer" onclick="setTimeout('mes()',3000)"> </form> <script> function mes() { alert("3秒経ちました！"); } </sc
ファイルダウンロード完了後に画面遷移などをjavascriptで行う - nabehiro ブログ
レアケースですが、PDFファイルダウンロード後にページの画面遷移(再読込)を行いたいケースがありました。 javascript(setInterval) と Cookie を利用するとファイルダウンロード後に処理を行うことができます。 サンプル form submit でファイルダウンロードし、ダウンロードが完了した後に alert を出します。(画面遷移したい場合は、location.hrefなどで) サーバサイドのファイルダウンロード処理の中では cookie({ name:"downloaded", value:"yes", path:"/"}) を発行します。 ※jquery.js, jquery.cookie.js を使用している前提。 <html><body> <form> <input type="submit" value="ダウンロード" /> </form> <scri
Checkboxes and radio buttons customization (jQuery and Zepto) plugin
super customized checkboxes and radio buttons for jQuery & Zepto iCheck v1.0.3 @Fronteed Plugin features Identical inputs across different browsers and devices — both desktop and mobile Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle Keyboard accessible inputs — Tab, Spacebar, Arrow up/down and other shortcuts Screenreader accessible inputs — ARIA attributes for Voic
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
jQuery File Upload Demo
jQuery File Upload Demo File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads. Pintura
flickGal - jQueryプラグイン | stakamura
$(function(){ $(".yourElement").flickGal(); }); iPhoneでフリックギャラリーを実装するプラグインを作ってみました。 Androidの友達が「多分動いてる」と言っていました。PCでもそこそこ動きます。 iPhoneのtouchEventなどに関して、nogunoguさんの記事を大変参考にさせていただきました。というか完全にnogunoguさんの研究のおかげです。感謝でございます。 デモ こちらをご覧ください。→ view demo ※iPhone向けのページです。Androidでも動くらしいです。PCでもそこそこ動きます。 確認環境： iPhone3G v4.2.1 Safari, iPad v4.2.1 Safari ダウンロード コミットの仕方なんか変かも知れません。 ダウンロード (GitHub) 圧縮版はだいたい3KBくらいです
進捗表示/ドロップ対応/複数対応/確認プレビューあり もう完璧じゃね？と思える「jQuery File Upload Plugin」
複数のファイルを選択、ドラッグ＆ドロップ、プログレスバー、ファイルバリデート、プレビュー表示ともう完璧までに装備されたファイルアップロード用jQueryプラグイン「jQuery File Upload Plugin」 クロスドメイン、一時キープ、再開ファイル、アップロードの中断、クライアント側の画像のサイズ変更などなどサポートします。 サーバー側処理はPHP, Python, Node.js, Go などソースが準備されています。 Ruby on Rails, Javaもサポートとあるけどソースは見当たらず。 ・・・ところでGoって何？＾＾； もうこれがあれば、フロントもバックエンドもファイルアップ用インターフェイスは完璧じゃないかな。 公式サンプル http://blueimp.github.io/jQuery-File-Upload/ インターフェイスにTwitterBootstrap
今、AngularJSというフレームワークがヤバい - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年11月05日10:36 JavaScript 勉強会 今、AngularJSというフレームワークがヤバい 先週の土曜日、ランサーズさんで行われた 第３弾 週末ランサーズ に参加して個人的に今アツい AngularJS について話してきました。 AngularJS は ng-repeat が便利だったり、コードの見通しが良くなるなどいろいろなメリットがあると思うのでうまく使えば大変メリットがあると思います。特に、データの状態（要素の追加・削除や、状態のon/off など）を制御すればそれに合わせて view の表示はすべて AngularJS がやってくれるというのは素晴らしいですね。 ちなみに、以下の資料の中で ng-app とか ng-repeat とか出てきますが（これは directive と呼ばれます）、この ng というのは AngularJS の２文字目と３文字目を表
HTML5のCanvas図形をクリッカブルにするjQueryプラグイン ClickableCanvas - ウィザード・コード | WIZARD-CODE
ClickableCanvasの概要 jQuery ClickableCanvasは、HTML5のグラフィック機能であるCanvasで描かれた図形に、一部のマウスイベントをバインドするjQueryのプラグインです。 図形にマウスを合わせたり、図形をクリックしたタイミングでDOMイベントのようにコールバック関数を呼び出すことができます。 Internet Explorerはバージョン8までCanvas要素に対応していないものの、FlashCanvasやExplorerCanvas、 uuCanvas.jsをページ内で呼び出すことで同等の機能を持たせることができます。 jQuery Clickable Canvas バージョン２を公開しています。詳しくはこちらのデモページへ！ 10/11/18 Canvas機能をInternet Explorerで実現するライブラリFlashCanvasに対応
[JS]指定した要素内いっぱいに背景画像を最適に配置するシンプルなスクリプト -Wallpaper
幅480pxで表示 Wallpaperの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.bp.wallpaper.js"> Step 2: HTML HTMLは通常通りで、背景画像を配置する要素は指定できるようidなどを加えます。 <header id="element"> ヘッダ </header> 複数箇所を適用する時は、classの方が便利です。 Step 3: JavaScript jQueryのセレクタで要素を指定し、sourceに画像を指定し、スクリプトを実行します。 $("#element").w
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryのあれ、D3.jsでどうやるの？(または、その逆) - Qiita
Why won't .filter() work in Internet Explorer 8?
Border
UI設計におけるスマートフォン対応のまとめ
JavaScriptをまじめに考えました+
