アニメーションするスピードメーターを実装できるjQueryプラグイン「Speedometer」:phpspot開発日誌
Speedometer | Jacob King アニメーションするスピードメーターを実装できるjQueryプラグイン「Speedometer」。 何かが高いスピードが出ているのを示したいようなケースにすぐ実現できます。レアなケースかもしれませんが、サイトのスピードが速くなったとか、なんらかのスピードが高まったのを分かりやすく伝えたいような場合に使えそう。 あんまり使わないかもしれないけれど、レアなパーツなんかをまとめておくと便利かもしれませんね 関連エントリ jQuery用データビジュアライズ用プラグイン「jQuery Visualize Plugin」
ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル:phpspot開発日誌
Animated Scroll to Top ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル。 ページの上の方にいる場合は必要ないかもしれないボタン。下に行くにつれ表示されることで上に戻れることが分かりやすく、上にいるときは邪魔にならないという使いやすいボタンが作れますね。 jQueryにて実装するチュートリアルとなっており、サンプルのダウンロードも出来るのでいざ実装する際に参考にできそう。 デモページ 最近WEBを巡回していると散見するUIですね。 関連エントリ 指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」 スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」
背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」:phpspot開発日誌
背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 2011年04月25日- jQuery Backstretch by Scott Robbin 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 大きな写真等を背景にしていると、ブラウザ幅によって折り返されたりしてかっこ悪くなってしまいますが、このプラグインを使えばブラウザ幅に応じて自動伸縮してくれます。 使い方はプラグインを読み込んだ後、次のように１行書くだけで実装できます。 <script type="text/javascript"> $.backstretch("http://farm3.static.flickr.com/2443/3843020508_5325eaf761.jpg"); </script> 背景に大きな画像を指定し
ちょっとだけ気の利いた、スクロールしてトップへ戻るボタン | ゆっくりと…
jQuery を使った小技ネタを1つ紹介。 滑らかにスクロールしてトップへ戻るボタン。もし、必要なときに現れ、いらなくなれば消える ー ちょっと気が利いてイイと思いませんか？ Web Designer Wall の記事 Animated Scroll to Top を紹介します 。ほぼそのままコピーになってしまいますが、ほんの少しだけ、アレンジもしてみました。 今回紹介するのは、jQuery を使ったトップに戻るボタン に、スクロール位置に応じて fadeIn() ／ fadeOut() の効果を加えたものとなっています。 トップに戻るリンクの部分です。ボタン画像は CSS で埋め込みます。 <p id="back-top"> <a href="#"><span></span>Back To Top</a> </p> CSS ボタンを固定する位置 （3〜4行目） と、ボタン画像のサイズ （
jQueryベースのWebフォームライブラリ「jFormer」
WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。 「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。 詳しくは以下 基本的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。 多彩なデモは「Demos – jFormer」からご覧いただけます。またベーシックなコンタクトフォームのつくり方は「Installation and Documenta
history.pushStateでページ遷移するjQueryプラグイン書いた - Webtech Walker
history.pushStateでのページ遷移をやりやすくするためにjQueryのプラグインとしてjquery.smarthistory.jsというのを書いてみました。 jquery.smarthistory.js history.pushStateをサポートしてるブラウザではhistory.pushStateを使って、サポートしてないブラウザでは何もしません（普通に遷移する）。今だとchrome、safari、iOS、Firefox4で動くと思います。 こんな感じで使います。 $('a').smarthistory({ defaultData: $('html').html(), target: function() { return $(this).attr('href') }, before: function() { // ajax前の処理 }, change: function
Lazy Load Plugin for jQuery - dunno logs : Archives
後から読み込んでよ うちのサービスはほぼデータを表示・編集する事が主なのだが、その一つ一つのデータは必ず画像を含むわけです。（まあ、弊社のサービス内容見れば何の画像かは明らかですが。） その画像はまあ3〜4KBぐらいなんですが、それでもデフォルトで100件とかの表示になると結構な分量です。しかもサービスの特性上できるだけキャッシュさせたくないので、毎回URLは変わるのでブラウザのキャッシュも期待できません。 そんなこんなでメインのページでさえ結構な読み込み時間・サイズになってしまうわけです。ちなみに100件表示だとページ全体で1.5Mぐらい。。 で、目をつけたのがLazy Load Pluginというわけですね。まあ、何かのついでに手軽にできないかなーぐらいで。 さっそく使ってみる このプラグイン自体は皆さん使われているようで、軽く調べただけでも相当数の使用記事が見つかりました。 なので詳
GitHub - defunkt/jquery-pjax: pushState + ajax = pjax
pjax = pushState + ajax pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button. pjax works by fetching HTML from your server via ajax and replacing the content of a container element on your page with the loaded HTML. It then updates the current URL in the browser using pushState. This results in faste
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2
jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量（5KB）のスクリプトを紹介します。 JavaScript Modal Windows – TinyBox2 デモページ [ad#ad-2] TinyBox2のデモ デモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。 ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応しています。 デモページ：No Animation, No Close Button, Auto Width/Height, Custom Styling アニメーション：無し、クローズボタン：無し、幅と高さ：自動、カスタムスタイリング
デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」:phpspot開発日誌
デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 2011年03月22日- jQuery File Upload Demo デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 ファイルアップロード用のプラグインはよくありますが、このプラグインでは、デスクトップにあるファイルをブラウザにそのままドラッグ＆ドロップでファイルアップロードが完結します。 ダイアログからいちいちファイルを選択して、というUIは使いづらいですが、これなら直感的に、初心者でも簡単にファイルをアップロードすることが可能になります。 尚、Firefox、Chromeで動作。IEでは動きませんでした。 デスクトップからファイルをドラッグすると枠がニュイーンと広まって、ドロッ
jQueryでスクロールしても上に固定されるメニュー｜Webpark
よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =
Fixed Fade Out Menu: A CSS and jQuery Tutorial | Codrops
Inspired by David Walsh’s top navigation bar that gets semi-transparent when you scroll down the page, I decided to create a tutorial out of that idea. The aim is to […] Inspired by David Walsh’s top navigation bar that gets semi-transparent when you scroll down the page, I decided to create a tutorial out of that idea. The aim is to have a fixed navigation that follows the user when he scrolls, a
jQuery.extend マニアックス - てっく煮ブログ
JavaScriptjQuery の extend メソッドは便利なんだが複雑で忘れてしまいがちなのでメモしておく。jQuery.extend の呼び出しパターンは次の４通り。$.extend([deep,] target, obj1, [obj2, [obj3, ...)$.extend([deep,] obj)$.fn.extend([deep,] obj)$(...).extend([deep,] obj)全てのパターンで第一引数に [deep,] がある。これはオプションの引数で true を指定するとディープコピーしてくれる。以下では分かりやすくするために deep オプションは省略した一覧を掲載する。$.extend(target, obj1, [obj2, ...)$.extend(obj)$.fn.extend(obj)$(...).extend(obj)だいぶシンプルにな
jQueryのメソッドチェーンでifを実現するiff plugin - monjudoh’s diary
紹介 タイトル通りのplugin Ben Alman » jQuery iff: A chainable "if" statement 言及のきっかけとか 実用性がどうかとかより、以前似たようなものを実装しようとした者として、 そのシンプルな実装に感動したので言及しておく。 ちなみに私が作ったのはこの辺 条件付メソッドチェーンを実現するjQuery pluginを作ってみた - 文殊堂 if文の条件部に相当するメソッドに渡るのがtrueなら次のメソッドは実行するというのはさっくり実装出来たが、 条件付メソッドチェーン実現のためjQueryのラッパーを作ってみた - 文殊堂 複数メソッドをifの対象にするには結構七面倒くさいことをしないといけない。 と私は思っていた。 iff pluginでは、iffメソッドにfalsyな値を渡すか、 関数と引数のセットを渡してそれを実行したときにfalsy
瞬時にタグクラウドが形成できるjQueryプラグイン「Jimpl Tag Cloud」:phpspot開発日誌
Jimpl Tag Cloud 瞬時にタグクラウドが形成できるjQueryプラグイン「Jimpl Tag Cloud」 次のようにHTMLを定義して $('#tagcloud').tagCloud({separator: '.'}); とするだけで上記のタグクラウドが形成出来ます。 <div id="tagcloud" class="tagcloud"> Image converter. Image converter. Image resizer. Png to ico. Png to ico. Png to ico. Ico to png. Png to jpg. Jpg to png. Jpg to png. Bmp to jpg. Jpg to bmp. Jpg to gif. Gif to jpg. Png to gif. Png to gif. Gif to png. Onl
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」:phpspot開発日誌
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」。 このプラグインを使えば、テーブルのデータを読み込んで、リアルタイムにグラフ化してくれます。 $('#table1').graphTable({series: 'columns'}); みたいにすることで、指定したテーブルのデータを次のように描画させることが可能です。 既存の表がある場合は、ブラウザ上でグラフ化することが出来て便利ですね。 以下のエントリを参照してください。 graphTable: graph data from HTML table using flot | jQuery Wisdom 関連エントリ jQueryで実装する進捗グラフ付き複数ファイルアップローダー JavaScript用のグラフ描画ライブラリ色々 CSSだけで円グラフを表示するサンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
CSSのdisplay:inline;はposition:absolute;の時効かないっていう例 - ふじこのプログラミング奮闘記
GitHub - kswedberg/jquery-smooth-scroll: Automatically make same-page links scroll smoothly
