jQueryで設定されたクリックイベントなどを定義している場所を調べる方法 - Qiita
Chromeなどのモダンブラウザであれば、デベロッパーツールがあってJavaScriptのデバッグなどもそこで容易にできる。例えば、なんかのボタンにJavaScriptでクリックイベントを設定している場合、なにが設定されているかの確認もサクッとできる。 デベロッパーツールで、イベントの中身を確認 <div id="click1">click1</div> <script> var click1 = document.getElementById('click1'); click1.addEventListener('click', function() { console.log('click1'); }); </script> Command + Option + i のショートカットで起動 調べたい要素を選択し、右側のパネル「Event Listeners」を選択する 右端のフィルタっ
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
[JS]ページ内のハッシュリンクの箇所のみ表示するスクリプト -Paginator
使いどころが難しそうですが、ページ内のidをもったセクションのみ表示するjQueryのプラグインを紹介します。 Paginator デモページ (http://sbp.so/paginator#try) [ad#ad-2] Paginatorのデモ デモページの全部のコンテンツは、下記のようになっています。 デモページ (http://sbp.so/paginator#get) [ad#ad-2] Paginatorの実装 外部ファイル 「jquery.js」とハッシュイベントをコントロールする「jquery.hashchange.js」と当スクリプトを外部ファイルとして指定します。 <script src="jquery.js"></script> <script src="jquery.hashchange.js"></script> <script src="jquery.pagin
jQueryでにリセットボタンをつける - None is None is None
<input type="reset">という手もありますが、フォーム全体がリセットされてしまうので、各<input type="file">毎にクリアボタンがあると便利でしょう。 参考:Clear upload file input field with jQuery //jQueryが必要です。 function add_clear_button(button){ $(button).wrap('<span></span>'); $(button).after('<input type="button" value="Clear"/>'); $(button).next().click(function(){ var s = $(this).parent(); s.html(s.html()); }); } $(document).ready(function() { //全てのinp
prototype.jsからjQueryに移行するたったひとつの冴えたやりかた - os0x.blog
どうもこんにちは、os0xです。 実は(Twitterに書いただけで)ブログに書いてなかったのですが、3ヶ月ほど前からクックパッドで働いています*1。なんかもう今更ですよね、すみません。 さてさて、クックパッドですが、つい一昨日までprototype.jsを使っていました。で、昨日jQueryへの移行をリリースしたところだったりします。 というわけで、その辺の話を少し書いてみたいと思います。 そもそも、なんでjQueryに移行するのか まあ、prototype.jsとjQueryどちらを使うかと問われたら、大抵の人はjQueryと答えますよね。確かにjQueryの使いやすさは魅力的です。使いやすいということは、みんなでjQueryを使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。 しかし、ライブラリを変えるのは簡単な
jQueryではじめるAjax：第3回 Youtube APIとjQueryを使いこなす｜gihyo.jp … 技術評論社
たとえば、検索結果を表示する簡単なアプリケーションのために、整形されたHTMLを含むデータを取得するには次のように指定します。 http://gdata.youtube.com/feeds/base/videos フィードの種類 データを取得するフィードは数種類あります。 通常はVideoフィードを使えば十分ですが、投稿者の情報やコメントの情報等を取得するフィードもありますので、必要に応じて使い分けてください。 全てのフィードは読み取り専用であり、認証無しでリクエストすることができます。 また、新しく投稿されたビデオがフィードで取得できるようになるには、インデックス化のため数時間かかります。 Videoフィード Videoフィードには、ビデオ、関連動画、standard、お気に入り、再生リスト、コメントのフィードがあります。 ビデオフィード ビデオを検索するには、ビデオフィードを使います。
jQueryではじめるAjax：第2回 jQueryによるAjax実装｜gihyo.jp … 技術評論社
第1回ではJSONPによるAjax実装を取り上げましたが、今回はそこで使ったJSONという表記法と、JSONPというAjax実装手法について解説します。また、jQueryによる簡単なAjaxの実装についても解説します。 JSONってなに？ JSONとは、JavaScript Object Notationの略称です。ECMAScript言語 ECMA-262をベースに作られた、Javascriptオブジェクトの表記法のサブセットです。 JSONは、名前と値のペア、および、順序付きの値という2つのシンプルな構造に基づいて、構造化データを簡潔に表現することができます。 オブジェクト（名前と値のペアの集まり） JSONでオブジェクトを表現するには、メンバを「{」と「}」で囲みます。複数のメンバは「,」で区切られます。例えば、名前が「color」、値が「green」というメンバを持つオブジェク
第1回 まずは実装してみよう | gihyo.jp
はじめに この連載では、Javascriptは知っているけどAjaxは実装したことがないという方に向け、YouTube APIを利用したWebアプリケーションを題材に、実装の方法を解説します。 JavascriptのライブラリはjQueryを使用します。jQueryによるAjax実装、基本的な使い方、また、UIへの応用実装も合わせて解説します。 Ajaxってなに？ Ajaxとは、Asynchronous Javascript+XMLの略称です。Javascriptを使い、Webページとは非同期（Asynchronous）にXML形式（もしくはテキスト形式）のデータ通信を行う手法を指します。 Ajaxを使うと特別なプラグインなどを必要とせず、Webページの必要な部分だけ必要に応じて書き換えることができるため、ユーザビリティの高いWebアプリケーションを作ることができます。また、異なるWebサ
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」:phpspot開発日誌
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです（ブラウザごとにクッキーに依存した文字数制限などは存在すると思います） こういうことを１からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ
[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX
Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。
面白い！自分のサイトにコナミコマンドを·Cheat Code MOONGIFT
※ 画像は公式サイトより ファミコン世代ではお馴染みのコナミコマンド。いわゆる「↑↑↓↓←→←→BA」を打つと何らかのチート（大抵は最強装備）がおきる。グラディウスが有名だが、他にも魂斗羅、サイレントヒル、Dance Dance Revolution、メタルギアソリッドなどでもできるようだ（via Wikipedia）。 見た目は普通のページ コナミのゲームだからこそのコナミコマンドではあるが、それを自分のWebサイトでも実現しようというのがCheat Codeだ。 今回紹介するフリーウェアはCheat Code、jQueryでコナミコマンドを実装するライブラリだ。ソースコードは公開されているがライセンスは明記されていなかったのでご注意いただきたい。 Cheat Codeを読み込むと、Webサイト上でコナミコマンドを入力した際に指定した処理を呼び出せるようになる。Gmail調にデザインを変
JavaScript でくるくる CAPTCHA を実装してみる - IT戦記
あっきーパパが Google の新しい CATCHA の論文を紹介してたので グルグル回すグーグルの新CAPTCHA特許 | 秋元@サイボウズラボ・プログラマー・ブログ 脊髄反射で作ってみた （UI の部分だけですが；；；） http://amachang.sakura.ne.jp/misc/kurukuru/（IE では動きません） jQuery UI と canvas を使ってます。初めて使いましたが、いいですね、 jQuery UI。 （追記）せっかくなのでソースコードの解説 // 初期値の設定 // prev_value は最後に設定された値の保持用 last_value のほうが良かったかも var start_value = Math.PI, prev_value = start_value; // 回転用イメージオブジェクト var img = new Image; // i
jQuery TreeView, Flexigrid を Rails で使ってみた - yuumi3のお仕事日記
訳あって、jQuery プラグインの TreeView, Flexigrid を Ruby on Rails + jRails で使ってみました。以下の画像のように左のツーリー(TreeView)で選択したディレクトリー内のファイル一覧が 右側の テーブル(Flexgrid) に表示されます。 使っているソフトなど jQuery jQuery Flexigrid for jQuery クールなグリッド(テーブル)の表示 jQuery plugin: Treeview ツーリー表示 jRails - jQuery on Rails Railsのlink_to_remote等のAjax機能を jQueryで使えるようにするプラグイン nickfessel.com - Put Flexigrid on Rails Flexigrid用 Ruby on Railsのコード例 今回作ったコード 実際
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryイディオム：テーブルの行クリックでチェックボックスにチェック入れる - とっくりばー
IDEA * IDEA
Lightboxスクリプトいろいろ - DesignWalker
GitHub - dillon-sellars/BeautyTips: BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called "talk bubbles" or "help balloons") associated with a html element on the page
How to Mimic the iGoogle Interface
jQueryでweb制作をする時にキープしておきたい30リストまとめ*ホームページを作る人のネタ帳
