【HTMLネタ】数値のみ入力を許可するinputフィールドを実装したかった
月曜日担当の鳥飼です。お久しぶりです。よろしくお願いします。 今日のひとネタ iPad での閲覧を前提としたWEBページで、数値のみを入力するフィールドを使いたかったんですが、 iPad は <input type="number" /> が対応していないんですね。 なので、javascript で対応した時のネタです。 キーコードで制御しようと思った 最初はこんな感じのコードを書いていました。 $(element).on("keydown", function (event) { // バックスペース、削除、タブ、エスケープ、リターンの入力を許可 if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || // Ho
FlexSlider 2
// Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); <!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> <li> <img src="slide4.jpg" /> </li> </ul> </div>
jQueryでフレームアニメーション（パラパラアニメ）を実装するプラグイン「jquery.frameAnimation.js」｜BLACKFLAG
これらのオプション値の設定は 個別に変更させることも可能です。 そして実行スクリプトは以下の様になります。 ◆SCRIPT <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.frameAnimation.js"></script> <script> $(function(){ $('.frame1').frameAnimation(); }); </script> 実行スクリプトにオプション値を記述する場合は 以下の様な記述になります。 ◆SCRIPT <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scr
» スマホでスクロールを禁止させる方法 | negic
軽めのjQuery Advent Calendar 2012の24日目の記事です！ PCサイトでスクロールを禁止させるには、bodyにoverflow: hidden;をかければスクロールができなくなるが、スマホサイトでは、一部Android端末では効くが、iOSではスクロールができてしまいます。 スマホでスクロールを止めるには、jQueryを使うと便利です。 スマホの独自イベントである、touchmoveイベントを切ればスクロールを止めることができます。 方法は下記のとおりです。 $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); あるタイミングでスクロールさせたくなったら、off()すればいい。 $(window).off('.noScroll'); イベント名に、.noScrollとあるが、
jQuery の jqPlot プラグインで作る折れ線と縦棒を併用したグラフ
jQueryのjqPlotプラグインで、折れ線グラフと縦棒グラフを、ひとつのグラフの中で、同時に出現させる方法。 実装例（サンプル） <script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script> <!--[if lt IE 9]> <script language="javascript" type="text/javascript" src="excanvas.min.js"></script> <![endif]--> <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script> <script language="javascript" type="te
jQuery の jqPlot で作る縦棒グラフの縦棒をアニメーションで出現
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、縦棒をアニメーションで出現させる方法。 実装例（サンプル） 実装例（サンプル）の動作について ページを表示すると、縦棒グラフ内の縦棒が、下から上へ伸びるように現れる。 実装例（サンプル）のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 <script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script> <!--[if lt IE 9]> <script language="javascript" type="text/javascript" src="excanvas.min.js"></script> <![endif]--> <script language="javascript" ty
Handling Keyboard Shortcuts in JavaScript
Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games - no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that. So, I have crea
[JS]jQueryのプラグイン100選 -2012年総集編
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
[JAVASCRIPT] Gritter for jQuery (Growl) - GrowlのようなNoticeをJSを使ってウェブ上で再現
[JAVASCRIPT] Gritter for jQuery (Growl) – GrowlのようなNoticeをJSを使ってウェブ上で再現 Pocket Tweet マックユーザーにはおなじみのGrowl（もうこれ純正の機能にしちゃえばいいのに）のようなNoticeメッセージを、ウェブ上で再現するというJS。ライブラリにはjQueryが使われています。見た目にはほぼGrowlまんまといった感じで、アラートの出し方にもいくつか方法があります。デモサイトはこちら。考え方によっては結構色々と使い道がありそうな気がします。 Gritter for jQuery (Growl)
jQueryのlive関数を使ってAjaxで取得したコンテンツにイベントハンドラを登録する
jQueryのlive関数について紹介します。 live関数の使用例として、コンテンツの折りたたみをサンプルに用います。 １．コンテンツの折りたたみ h3要素をクリックしたときに、h3要素の次にあるul要素全体を折りたたむには、次のようなjQueryのコードを記述します。実際の動作は「サンプル1」のリンク先で確認できます。 サンプル1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(function() { $("h3").click(function() { $(this).next().slideToggle(0); }); }); </script> <h3>最近のブログ記事</h3> <ul> <li>モバイルサイトオープン</li>
機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」:phpspot開発日誌
Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集
なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
NHKスタジオパーク
NHKスタジオパーク その２ NHKスタジオパークをVRで！大人気だったアニメのアフレコやキャスター体験をどうぞ！ NHKスタジオパーク 閉館について ２０２０年５月１１日 平素よりＮＨＫスタジオパークをご利用いただき誠にありがとうございます。 新型コロナウイルス感染拡大防止のため臨時休館中のＮＨＫスタジオパークは、６月の再開をめざしてきましたが、このたび閉館させていただくことといたしました。 緊急事態宣言が延長されるなど新型コロナウイルスをめぐる状況の先行きが見通せないことと、東京オリンピック・パラリンピックの延期に伴い、放送センターの建て替え工事の準備作業にスケジュールの変更が生じたためです。 当初はことし９月いっぱいでの閉館を発表していましたが、諸般の状況の変化に伴い、閉館時期を早める判断に至りました。 長年、多くの方々にご利用いただき、心より御礼を申し上げます。 既に団体予約をされ
GitHubの画像比較のようなスライダーを実現するjQueryプラグイン·jQuery CompareWYW plugin MOONGIFT
jQuery CompareWYW pluginは二つの写真をスライダーを使って表示を切り替えられるソフトウェアです。 GitHubでは画像の差分表示がグラフィカルに行えるようになっています。スライダーを使って違っている部分をダイナミックに表示させられます。あれに衝撃を受けた方、同様の操作をjQuery CompareWYW pluginを使って実現できますよ！ デモです。中央のバーが左右に動きます。 寄せました。 逆に動かしました。 ドラッグではなく単にマウスを動かすだけで良いバージョンもあります。 jQuery CompareWYW pluginでは左右の写真は別々に設定するので、同じ場所を全く違う季節に撮影して並べたり、髪を切る前と後の比較などで使っても面白いかも知れません。アイディア次第で色々な使い道が生まれそうです。 jQuery CompareWYW pluginはjQuery
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
textareaの高さを自動調整する便利なjQuery！height100が効かない場合におすすめのスクリプトを公開！ | 自作PCテクニカルセンター
jsdo.it
CUT UP WORKS
GitHub - zuk/jquery.inview: Remy Sharp's jQuery plugin adds a bindable 'inview' event for detecting when an element is scrolled into view.
n1n9-jp - Overview
http://boedesign.com/demos/gritter/