この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 パララックス効果のあるコンテンツ を作る為の雛形みたいなコードがあ ったのでメモ。既に似たようなのは いろいろあるんですが、div要素を 使って実装していて自由度がありそう だったので備忘録的に記事にしておき ます。 昨日訳あって、FAQサイトをさまよってたらたまたま見かけて良さそうだったので勉強用にちょっと拝借しました。 Parallax with jQuery レイヤーはdiv要素です。赤いボックスはクリックで緑に変わりますが、IE7以下ではz-indexのバグがあるためクリックできません。 スピードや動く範囲だけなら以下のあたりを変えればいいです。 distance = 70;//マウスに対して要素が動く距離 sensitivity = 7;//感度。というか
解説 HTTPリクエストを使用してデータを取得します。 このメソッドは、ajax の最も低レベルな実装です。 より使いやすく具体化された実装には、jQuery.get(url, [data], [handler], [dataType])、jQuery.post(url, [data], [handler], [dataType])などがあります。 但し、このメソッドほど多くの機能は提供しませんので(例えば、エラーコールバック関数などは指定できません)、場合によって使い分けてください。 (もちろん、ajaxError(handler) 等のグローバルAjaxイベントを使えば、共通処理におけるハンドリングは可能です。) このメソッドは XMLHttpRequest を返します。ほとんど使用することはありませんが、必要であれば、手動でリクエストを中止したりすることができます。 引数 optio
Mon, Jan 1, 0001 Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader ut
JavaScript and Web by Ginpei
jScrollPane - cross browser styleable scrollbars with jQuery and CSS jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser's default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS. jScrollPane is designed to be flexible but very easy to use. After you have downloaded and included the relevant fil
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Features: ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k. The ThickBox JavaScript code and C
散々既出な気がするネタシリーズ。TITLE属性をツールチップで表示させるやつです。簡単なヘルプとか表示してあげるとユーザビリティを向上させることができる場合がありますよね。jQueryを使うととても簡単につくれます。というよりも、使いたいときにさらっとコピってすぐ使えると思うので頭の片隅にでも置いておくと便利かもしれません。 Demo Download demo files ポイントは TITLE属性を持っている要素にイベントを設定する ( *1 mouseover()でツールチップを生成する ( *2 mouseout()でツールチップを消去する ( *3 mousemove()でツールチップの位置を変える ( *4 です。今回はmouseout()で消去するにしてますが、別にいちいち消さなくてもいいです。textを変えればいいだけですから。上の項目をJSソースにすると以下のような感じに
$(function(){ $(".yourElement").flickGal(); }); iPhoneでフリックギャラリーを実装するプラグインを作ってみました。アンドロイド等他のスマートフォンでは確認しておりません... iPhoneのtouchEventなどに関して、nogunoguさんの記事を大変参考にさせていただきました。(というか完全にnogunoguさんの研究のおかげです)感謝でございます! デモ こちらをご覧ください。→ view demo ※PCでの挙動確認は確認できません。iPhoneで見てもらえると嬉しいです。 確認環境: iPhone3G ver 4.2.1 Safari, iPad ver 4.2.1 Safari ダウンロード githubついに導入できた!コミットの仕方なんか変かも知れません。 ダウンロード (GitHub) 実装手順(1〜4) 1.
jQueryを利用してアコーディオンを用意するサンプルです。使い勝手がよいようにシンプルな作りにしました。見出しをDT、中身をDDとして記述するため、HTMLのマークアップ的にも悪くないはずです。見た目はスタイルシートで自由にカスタマイズできます。 ひとつめ 中身は何でも可。 ふたつめ みっつめ YouTubeで見かけたにゃんこ。 導入方法は簡単です。まずはHEAD要素内に以下の行を追加してjQueryを利用できるようにします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> ここではGoogleからjQueryを読み込んでいますが、自分のWebサイトにjQueryを置いて、それを読み込ませるようにしても問題ありません
What is it? Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves. Why another lightbox? Because we wanted, nay, needed a Facebook-style lightbox on FamSpam. Download Requires jQuery 1.2.1. You'll need a loading image, close label, fo
Thank you for being patient. We are doing some work on the site and will be back shortly.
Demo Click on one of the images below to view it fullscreen. Use your fingers or cursor keys to flick through the images. Click again (or press esc) to return to this view. NETEYE Touch-Gallery A fullscreen photo gallery for touch-devices. Supported Browsers The plugin was written and optimized for Mobile Safari running on the iPad or iPhone 4. It also runs in Dektop Safari, Firefox 4, as well as
ブログとかのプラグインでよく分からず使ってる人もいるみたいですし。結論は一番上のやつやってればいいんですけど、というか、プラグインソースは全部こうなってないとだめなんですけど、古いソースコードはそうなっていないものもあったりして(thickboxとか)、思いつく方法全部書き出します。 カプセル化する(これだけやればOK jQuery.noConflictを使う $をjQueryに置き換える jQueryを使わない jQueryだけを使う カプセル化する(これだけやればOK プラグインソースを (function($) { // hogehoge })(jQuery); で囲むだけ。ソースコードは // hogehoge のところに入れてください。これは簡単に言うと、(function($) { })(jQuery); に囲まれた中では $ = jQuery として扱われるのですね。この中は
See related links to what you are looking for.
更新履歴 2011-09-29 Ver 0.1.4 に更新 jQuery 1.6.2 に対応しました 2010-06-10 Ver 0.1.3 に更新 getTargets, getTarget メソッドを追加しました 2010-06-04 Ver 0.1.2 に更新 IE6 で実行時にタイミングにより表示されてたエラー警告を、表示されないように修正しました。 2010-06-01 Ver 0.1.1 に更新 IE で正常に動作しない不具合を修正しました。 社内アプリも Ajax 的な UI なものが増えるにつれて、1画面にたくさんの機能を詰め込みたいという要望を受ける事が多くなりました。素直に作るとプログラムも肥大化し保守も大変になるので、機能単位に画面を分けて作成し、それぞれの画面を iframe で1つの画面に読み込むといった方法で対応したりしてます(iGoogle 的な感じ)。 そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く