jQuery プラグインの DateTimePicker が良さそう - QiitajQueryUI に DatePicker はあるけど TimePicker がないので探してみたら jQuery プラグインの DateTimePicker を見つけた。 jQuery Date and Time picker | jQuery Plugin Registry DateTimePicker - XDSoft plugins, scripts, program, parsers 使い方
[JS]エフェクトの美しさがスゴイ！Webページを水面にし、波紋を生み出すスクリプト -jQuery Ripple
Googleの新UX「Material Design」のアナウンス以降、波紋のエフェクトを数多く紹介してきました。例えばこれとかRiiple Click EffectとかWavesとか。 それらとは一味違い、WebGLでリアルな波紋を描くjQueryのプラグインを紹介します。 jQuery Ripples Plugin -GitHub ↑ファイルサイズを軽減してます。実際はもっと本物の水面です。 jQuery Rippleのデモ jQuery Rippleの使い方 jQuery Rippleのデモ デモはChrome, Safari, Firefox, Opera, IEは11+で、OpenGL 2.0対応のビデオカード内蔵のPCでご覧ください。 ページ上をクリックすると、そこから波紋がどんどん増えます。 jQuery Rippleの使い方 Step 1: 外部ファイル 当スクリプトとjq
![[JS]エフェクトの美しさがスゴイ！Webページを水面にし、波紋を生み出すスクリプト -jQuery Ripple](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4d2ad555b67ee7509f227b6ac09d4c92e1ab29b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014110501.gif)
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
新鮮なアイデアが満載！アニメーションやスクロールを使った実装テクニックのまとめ
見るだけでワクワクする、そんな素晴らしいアイデアが満載のアニメーションやスクロールを使った実装テクニックをCodePenから紹介します。
jQuery.ajax()でファイルをアップロードする方法
jQuery.ajax()でファイルをアップロードする方法を紹介します。 １．はじめに jQuery.ajax()で画像ファイルをサーバに送信し、バックエンドのPHPで画像の幅・高さを返却し、それを表示するという簡単なプログラムを組んでみました。 フロントエンド <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function(){ $('#foo').submit(function(){ $.ajax({ url: "test.php", type: 'POST', data: { 'file': $('#file').val() }, dataType: 'json' }) .done(function( data ) { $('#re
jQueryの.each()に潜む罠 - 暮らしの技術
.each()の話 jQueryの.each()を使うと，JavaScriptのオブジェクトか配列を対象にした繰り返しを簡単に記述できる．*1 var list = [0,1,1,2,3,5,8,13]; $.each(list, function(index, elem){ console.log(elem * 2); }); // 0 VM2035:4 // 2 VM2035:4 // 2 VM2035:4 // 4 VM2035:4 // 6 VM2035:4 // 10 VM2035:4 // 16 VM2035:4 // 26 VM2035:4 で，このeachにはもう一つ書き方がある． var list = [0,1,1,2,3,5,8,13]; $.each(list, function(){ // さっきは引数にindex, elemを指定していた console.log(
郵便番号を入力すると住所を自動補完してくれるjQueryプラグイン・jquery.jpostal.js - かちびと.net
郵便番号から住所を自動補完してくれるライブラリのご紹介。他にもいくつかありますけど使いやすかったので備忘録として。 よくあるやつ。メンテも不要との事なので助かります。 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script> ライブラリはgooglecode.comにホストされているものを直接読み込みます。 $('#postcode1').jpostal({ postcode : [ '#postcode1', '#postcode2' ], address : { '#a
Turbolinksをオフしないためにやった事 - Qiita
fetchReplacement失敗時は再度レンダリングされ, landingの状態になる。 よく出てくるおまじない $(document).on 'ready page:load', -> これはjqueryが提供する'ready'とTurbolinksが提供する'page:load'の両方で定義すること。 非Turbolinks遷移時は'ready'で発火。 Turbolinks遷移時は'page:load'で発火の両方をカバーするという意味。 Turbolinksをサポートしていないブラウザでも'ready'が発火するので安心。 jquery-turbolinks gem 'ready'triggerにpage:loadを追加してくれる機能を提供。 Trigger tips 通常、page:changeでaddEventListenerしてはいけない。 fetchHistoryの際に
覚醒!JavaScript
7月19日に行った「覚醒！JavaScript」勉強会で使用したスライドです。 http://connpass.com/event/7082/
スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクトがかっこいいっ！
ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ！と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです！ 各エフェクトのソースは上記ページからまとめてダウンロードできます。
jQuery の.on()をもういっぺん理解してみる - あまり新しくないもの
jQueryのイベントハンドリングには、現在 .on(),.off()のみが推奨されて利用されています。 その基本的な使い方はこんなかんじでした。 $(element).on(event, function() { console.log('event fired!'); }); この場合、対象となる$(element)において指定したeventが発火した時に、コールバック関数が呼び出されます。非常に直感的ですね。 ところで、これは以前の.bind()と全く同じです。 .bind()の場合は、指定したずばりその要素に対してのみ、イベントハンドリングを行います。よって、.bind()が呼び出されたその時点で存在しない要素に対しては、たとえセレクタが一致していたとしてもハンドリングが行われません。 このことを利用すれば、イベントハンドリングをしたいまさにその要素にのみ、たとえその後同じセレクタ
jQuery with CoffeeScript | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. I don’t always write CoffeeScript, but when I do, I’m probably using jQuery too; I always forget the syntax for stuff. So I’m going to write it all down here so I can reference it until I memorize it. Note that the compiled example doesn’t include the automatic closure around everything you get in
Chromeコンソールでお手軽クローリング - Qiita
PhantomJSはすごく便利なのですが、ちょろっと使いたいだけのときにスクリプトファイルを用意するのは若干面倒です。対話モード(REPL)も用意されていますが、対話的に使うだけならChromeの方が使いやすい場面が多いです。 今回の想定シーンは、「GitHubでStarしてくれた人の一覧が欲しい」というようなケース。時々、Issueで全員に連絡したいことがありますよね。↓ こういうやつ。 @user1, @user2, @user3, ... GitHubだとJSONを返すAPIが用意されているので、それを使います。 コンソールを開く 新規タブを開いて、about:blankに移動します。まっさらな状態にするのがポイントです。 jQueryを仕込む PhantomJSを使う場合もそうですが、素のJavaScriptだと面倒が多いので、jQueryを仕込みます。次の2行を実行すればOK。
超チューニング祭に参加＆表彰した - Qiita
超チューニング祭 ちょっと遅くなったけど、2014/4/26-27の二日間、ニコニコ超会議3内のまるなげひろばの一角で開催された超チューニング祭にドワンゴチーム(メンバーは 江添亮さん, kmizuさん, masarakkiさんと合わせて4人)として参加したり表彰などをした話。 参加チームは全部で18チームかな?(チーム番号は20までだけど、2チーム欠番?)。 競技ルール ルールは、niconicoのスマートフォン版webのコピーの一部改変版を主催者サーバー上に配置し、速度とUIの改善を競うというもの。チームごとにコピーが配置され、各チームに秘密鍵が配られ、その鍵でSFTPで各チーム用サーバーにuploadする。 UIのユーザー投票と測定結果のそれぞれの順位の合計が一番少ないチームが総合優勝となるため、速度だけでもデザインだけでもだめ、というものであった。 投票以外では、UI要件(どの要素
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
世界地図／日本地図を作成する「jQuery Vector Maps／Japan Map」プラグイン
リアルタイムで入力チェック： jQuery-Validation-Engine のカスタマイズ - Qiita
jQuery File Uploadの使い方
Best JavaScript Typography Libraries | Code Geekz
jQuery pluginの書き方をいまさら - Qiita
JavaScriptで配列を値渡しをする - Qiita
