要素のリサイズイベントを検出する jQuery exResize - Cyokodog :: Diary
ブラウザのウィンドウサイズが変更された時に、何らかの処理を行いたい場合、jQuery では resize() メソッドで window オブジェクトに対し処理を割り当てます。 $( window ).resize(function(){ /* 行ないたい処理 */ }); 一方、div 要素などの普通の HTML 要素に対し、resize() メソッドで割り当てた処理は起動されることはありません。resize() メソッドではウィンドウのサイズ変更しか検出することができないようです。 今回作成した jQuery プラグイン exResize を使用すると、div 要素等の普通の HTML 要素においても、サイズ変更を検出し、割り当てた処理を実行させることができるようになります。 機能概要 以下の基本機能があります。 div 要素等の普通の HTML 要素に対するリサイズイベントの割り当て
jQueryプラグインのカスタムスクロールバー３種比較 – ヒビヅレ
以前jQueryプラグインを使ってスクロールバーをカスタマイズする方法を書きましたが、2010年9月に書いただけに情報も古かったので、紹介したjScrollPaneのバージョンアップ版に加えてjScrollbarとfleXcrollの2種類のカスタムスクロールバーのプラグインも合わせて比較してみました。タイトルにjQueryプラグインと書きましたがfleXcrollだけは単体で動作するのでjQueryは必要ありません。 ちなみにjQuery本体のバージョンは1.5.2を使ってます。 一先ず一番問題となるIEに対応しているかチェックしてみましたがどれもIE7どころかIE6にも対応してました。素晴らしい！以下にそれぞれのスクロールバーの特徴を上げておきました。 jScrollPane ・jQuery以外にjquery.mousewheel.jsが必要。 ・好きなIDやクラス名に対して設定可能。
スクロールバーをデザインするのに使えるjQueryプラグイン「Custom Scrollbar」 | Web活メモ帳
「Custom Scrollbar」はスクロールバーのデザインとスクロール量をカスタマイズできるjQueryプラグインです。 デザイン以外にも、イージング、マウスホイールへの対応など多彩なオプションが設定可能になっています。 OSが変わっても同じ見せ方をしたい場合などに良さそうですね。 詳しくは以下 デモ 多彩なオプション機能 以下のようなオプションが設定可能です。 スクロールの方法（縦か横） スクロール量 イージング量（スクロールを停止した後の慣性の量） スクロールバーの幅と高さ マウスホイールのサポート 使い方 jQueryやjQUery.uiなどのライブラリをheadタグで読み込みます。 <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <script src="http://aj
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速 jQuery Mobileと同様に、HTML5のマークアップでモバイルアプリケーション開発を実現するオープンソースのJavaScriptフレームワーク「jqMobi」のβ版が公開されています。 jqMobiのコンセプトは、jQueryとjQuery Mobileの機能のサブセットを、iOSとAndroid向けに最適化したものといえるでしょう。 すでにjQueryやjQuery Mobile、あるいはSencha Touchなど、さまざまなモバイル向けHTML5/JavaScriptフレームワークが登場する中で、jqMobiの特徴はどこにあるのか、ブログで次のように説明しています。 jQuery - still focuses on the desktop.
画像、動画やWebページをクリックで表示するLightbox系javascript「Shadowbox」
ホームページで、画像、YouTube、WMP、SWF、MOV、WMVなどのサムネイル画像・文字を クリックして、そのページ内で動画などを開く方法 [Shadowbox] Lightbox for Media 更に、画像も動画も一緒に、スライドショーをしてくれる[Shadowbox] Shadowbox は、画像、動画など幅広い多くのメディアを拡大ポップアップ表示してくれる。 また、様々なJSフレームワーク(アダプター）に対応しているので、いずれかを好みによりダウンロードして、使用します。 Base(standoalone)（非JSフレームワークタイプ） jQuery Prototype MooTools (requires 1.2 Core) Dojo Toolkit Yahoo! User Interface Library Ext (requires ext-core.js) jQue
データ可視化のためのグラフ描画JavaScriptライブラリ20選 | ゆっくりと…
SixRevisionsでオンラインでグラフを描画する場合に活躍しそうなJavaScriptライブラリの特集がありましたので、紹介します。個人サイトではあまり役に立たないかもしれませんが、観ているだけで楽しくなります。元記事に敬意を表し、なるべく趣旨が異ならずかつ変な日本語にならないよう心がけたつもりですが、訳に間違えがありましたら容赦願います。 2010年1月17日 by Jacob Gube 退屈な数値データを美麗かつインタラクティブに解り易く可視化するためのJavaScriptライブラリは数多くあります。通常はHTMLテーブルで表現するデータを、JavaScriptを使って可視化し美しく見せる事ができればあなたのデータはアクセシビリティーの優れたものとなるでしょう。私は2008年にデータのグラフ化＆チャート化のためのJavaScriptを書き上げましたが、今回再び単なるデータに生命を
[jQuery] post メソッドと ajax メソッドを使って POST 送信を行うサンプル
jQuery で POST 送信をすることができるメソッドに ajax と post があります。その 2 つのメソッドを用いた簡単なサンプルコードです。それぞれ post.php に POST 送信を行い、レスポンスをアラートで表示します。 まずは post メソッドの使用例です。 post.html <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('#sw').click( function(){ $.post( 'post.php', { 'pd': 'こんにちは' }, function(data){ alert(data); } ); } ); }); </script> </head> <b
![[jQuery] post メソッドと ajax メソッドを使って POST 送信を行うサンプル](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
画面遷移無しでファイルに書き込み - jQuery | Web
Sample ここに表示されます。 サンプルはファイルに書き込む処理を省略し内容を表示するだけに変更しています。 HTML HTML ではフォームに method="post" などを記述しなくても動きます。 ただ Javascript が実行出来ない環境も考えられるので、通常の方法でも出来るようにしておくと良いかと思います。 <form> <input type="hidden" value="このように書き込まれた内容が表示されます" name="msg" /> <input type="text" value="" name="text" /> <input type="submit" value="書き込む" id="post" /> </form> <p class="show"> ここに表示されます。<br /> サンプルはファイルに書き込む処理を省略し内容を表示するだけ
jQuery+Ajaxで画面遷移せずにコメント投稿をカッコよく更新するチュートリアル | URIN HACK
当サイトのコメントは投稿した時に画面遷移しないで更新されるようにしています。本記事はjQueryとブログサービスの仕組みを上手く組み合わせてシームレスにコメント投稿できるようにするチュートリアルです。 コメント投稿のサンプル動画 コメントを投稿すると、投稿した人には以下のように見えます。 htmlサンプル 本記事で紹介するJavascriptのサンプルは以下のようなhtml構造を前提にしています。仕組みを理解すれば自分のサイト向けにカスタマイズ出来ると思います。 コメントが表示される部分のhtml jQuery+Ajaxで取得した結果を格納するための要素（サンプルでは#new-comment）を用意するのがポイントです。それ以外はごく普通の構造だと思います。 1 <div id="comments"> 2 <div class="each-comment"> 3 それぞれ
jQuery の submit() ではまった - daily dayflower
jQuery の Ajax でフォームのバリデーションをして，オッケーなら submit するようなコード書いてたんですが， $('#button_submit').click( function () { $.ajax({ type: 'POST', url: 'バリデータ', success: function () { $('#form_main').submit(); return; } }); return false; } );コードはあくまで雰囲気程度です。 いろんなブラウザでテストしてうまくいってたので本番にもデプロイしたんですが，上司の使っている IE 6 でだけなぜかうまくいかなかった罠。他の人の IE なら OK なのに。 submit() Trigger the submit event of each matched element. This causes al
jQuery が IE でうごかねぇーーー、って思ったので、メモっとく。 - 雑想空間
jQuery・・・。 便利だけど、意外と IE でうごかねぇよ・・・。 option の最後に , を書いた場合。 例えばこんなとき $.ajax({ url: "〜〜〜〜", type: 'POST', dataType: 'xml', timeout: 10000, data: { "keyword": "test", }, error: function(){ alert('Error loading XML document'); }, success: function(xml){ hogehoge_success_flow; } });これ、IE でエラーがでる・・・。 原因は "keyword": "test",こいつです。 option を指定するとき、最後の１行には,を書いてはダメ。 firefox だと大丈夫だけどね。 $("＜a＞") みたいな感じで aタグのエレメン
汎用性の高い、jQueryの定番系プラグインのまとめ
単体で使ってもいいし、それを使って更に面白いものを作りだすのにも役立つjQueryの定番系プラグインを紹介します。 いつもリリースされたばかりのプラグインを紹介しているので、たまには定番系で汎用的なものを。
AjaxZip 2.0
Kawa.netxp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版） AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。 Ajaxと JSON フォーマットを利用するJavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも導入していただけると思います。 以下の住所入力フォームに、7桁の郵便番号を入力してみてください。 【2007/12/09 追記】 jQ
カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」:phpspot開発日誌
カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 2011年08月25日- PageScroll | jQuery Plugins カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 アニメーションさせるイベントや、アニメーションの種類、onScrollStart、onScrollFinishといったイベントハンドラの設定まで出来るというものです。 デモページがこれを使ってなかなかいい感じに実装されていて、メニューにカーソルを合わせると指定位置に加速度をつけながら移動するという面白いものになっています。 メニューをfixedで固定してあるので意外と使いやすいものになっていることが分かると思います。 クリック不要にすることでストレスを減らせている感じ メニューにカーソルを合わせると指定位置に
スクロールすると画像が読み込まれる 「LazyLoad」jQueryのプラグイン｜もしもde願いが叶うなら♪ ドロップシッピング奮闘記
ネットサーフィンをしていたら、かっこいいサイト発見 スクロールすると、そのスクロールに合わせて画像が表示されるのです。 真似したくなって、Googleで調べたら、 「LazyLoad」（jQueryのプラグイン）と言うモノらしい。 画像を多く配置しているページの場合、、、 ブラウザ画面に表示された時に、画像の読み込みを開始するので、 転送量や負荷を抑え、サーバー負担軽減になるそうです。 早速このブログに導入してみました。 スクロールすると画像が次々と表示されると思います。 その方法の覚え書き 2つのスクリプトをダウンロード（jQuery）http://jquery.com/ のページでダウンロード、 テキストエディタ（メモ帳）などにコピー&ペーストし、 ファイル名：jquery.js で保存します。 http://www.appelsiini.net/projects/lazyload の
GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」:phpspot開発日誌
GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 2009年08月05日- jquery-week-calendar - Project Hosting on Google Code GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」。 次のような、ドラッグ＆ドロップでイベントを作れるGoogle カレンダー風のウィジェットがjQueryプラグインとして公開されました。 なんと、次の１行で初期化という簡単っぷりです。 $("#calendar").weekCalendar(); 当然、コールバックを設定して、イベント追加時のコードをかけたりします。 プロジェクトページのリファレンスも充実しているようで、カスタマイズも簡単でしょう。 関連エントリ とても洗練さ
商用ホームページでのjQuery等のライセンスについて - OKWAVE
MITライセンスは、いわゆる「BSDスタイル」ライセンスです。 http://ja.wikipedia.org/wiki/MIT_License ---ライセンス和訳ここから--- 1. このソフトウェアを誰でも無償で無制限に扱って良い。但し、著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載しなければならない。 2. 作者または著作権者は、ソフトウェアに関してなんら責任を負わない。 ------ライセンス和訳ここまで--- といったライセンスです。つまり、 ・ソースコードを再配布する場合 →そのソースそのものが「ソフトウェアのすべての複製」にあたりますから、その中のライセンス表記を残す必要があります。 (ソースコード中の著作権表記をわざわざ消した上で、別途「主要な部分」にライセンス表記を行ってもいいですが、普通はそういう面倒なことはしません) ・バイナリで配布
Google Calendar風に使えるカレンダー実装jQueryプラグイン「jquery-frontier-calendar」:phpspot開発日誌
jquery-frontier-calendar - Project Hosting on Google Code Google Calendar風に使えるカレンダー実装jQueryプラグイン「jquery-frontier-calendar」がGoogle Codeにて公開されています。 広がるカレンダーをクリックで簡単に予定を追加し、次のように表示できます。ラインをクリックすれば予定が分かったり、ラインをドラッグ＆ドロップして予定をずらせたりすることが可能。 背景画像を指定したりすることも出来ます。 他にも同様のライブラリはありますが、仕様によって使い分けるとよさそうですね。 関連エントリ これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calend
これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム:phpspot開発日誌
これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム 2010年06月07日- Plugins | jQuery Plugins これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム。 なかなかリッチなUIとGoogleカレンダーばりの操作性を持つ便利なスクリプトになっています。 Googleカレンダーに登録するのもよいのですが、ちょっと外部に流したくないこととかも結構あるので、自前で構築したいというニーズもあるのではないでしょうか。 タイムライン上をドラッグ＆ドロップして予定を入れられます。ポップアップがでるので予定を入れます。日本語もOK 見ての通りUIもなかなかいい感じです。 スケジュール管理等に活用できますね。 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
