89540785, Comstock Images/ Comstock/ Thinkstock ブラウザ上でプレゼンがしたい。 そんなときに使えそうなのが、『jQuery Presentation Plugin』。ブラウザ上でプレゼンができるjQueryプラグインです。 シンプルなUIのプレゼンテーションファイルが作れますね。矢印キーでページ遷移が可能です。 繊細なフェードイン&アウトの動きになっています。 「slides」IDのdivの中の、「slide」クラスにページごとの内容を記述する形になっていますね。 デモは以下から。 take a look at a demo さっとプレゼンファイルを作りたいときにいかがでしょうか？ jQuery Presentation Plugin: Say NO to Keynote! いつかの分を挽回。 今日も寒いですね〜。代官山でランチしてきました。

Slide 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

jQuery でCSVデータを簡単に取り扱える「jQuery CSV」 Check Tweet 配布元：Plugins | jQuery Plugins | CSV ライセンス：Apache License, Version 2.0 jQuery CSVはjQuery でCSVデータを簡単に取り扱うことができるjQueryプラグインです。 利用方法 次にようにCSVデータに対して$.csv()(CSVデータ)を実行することでcsvデータを配列に変換することが出来ます。 var csv = $.csv()(CSVデータ) CSVデータは$.get()などのjQueryのAjaxメソッドを利用して取得します。 $.get('data.csv',function(data){ //Ajax後の処理 }) つまり、次のようなJavaScriptを実行することでCSVファイル（data.csv）のデ

// Convert CSV data into array of arrays jQuery.csv()("1,2,3\n4,5,6\n7,8,9\n"); // = [ [1,2,3], [4,5,6], [7,8,9] ] // It handles quotes jQuery.csv()('a,"b,c",d'); // = [ ['a', 'b,c', 'd'] ] // You can use any delimiter, e.g. tab jQuery.csv("\t")("a\tb\nc\td\n"); // = [ ['a','b'], ['c','d'] ] // Quick usage with AJAX: jQuery.get(csvfile, function(data) { array = jQuery.csv()(data); }); // Using acr

jQuery Keypad ソフトウェアキーボード実装ならこれかもという「jQuery Keypad」。 カスタマイズ性に富んだソフトウェアキーボード実装用のjQueryプラグインがあるみたいです。 数字を入力するためのソフトウェアキーボード。クリア、Backなんかのボタンもつけられます 普段、あまり入力しないようなものを入力する場合、こうしたヒントはとても役立ちそう 他にも、自在にカスタマイズできます。 使い方も無茶苦茶簡単です。 以下のようにしてエレメントを初期化すればOK。 $(selector).keypad({ /* options */ });

A jQuery plugin that attaches a popup keyboard to a text field for mouse-driven entry or adds an inline keypad in a division or span. The current version is 2.1.1 and is available under the MIT licence. For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations. Download now Defaults Invocation Inline Layouts Randomise Char

ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」 2009年06月15日- dwImageProtector Plugin for jQuery ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」。 Flickr などで導入されていますが、右クリックしてダウンロードしようとすると、元画像ではなくダミーの画像のダウンロードが開始する、という仕組みを簡単に実現するためのjQueryプラグインです。 ダウンロードしようとすると、ダウンロード開始するものの、ダミー画像(blank.gif)がターゲットになります。 単純に、元画像にダミー画像(blank.gif)を被せているというハックなのですが、画像の右クリックダウンロードを抑制したい方には便利に使えます。 以下のようなケースで保存す

ブラウザから離れてアイドルになった時のイベントを簡単取得できるjQueryプラグイン「jQuery idleTimer plugin」 2009年06月08日- Paul Irish jQuery idleTimer plugin ブラウザから離れてアイドルになった時のイベントを簡単取得できるjQueryプラグイン「jQuery idleTimer plugin」。 idleTimer pluginを使えば、ブラウザ内で、しばらく操作しなかったり、別のウィンドウに移動して、最初使っていたブラウザをしばらく操作しない場合に、”アイドル状態”としてイベントを発生させることが出来ます。 逆に、アイドル状態からの復帰もイベントで取得できます。 // タイマーをミリ秒単位で初期化(10000だと10秒) $.idleTimer(10000); $(document).bind("idle.idleT

There are a few cases where you want to know if the user is idle. Namely: You want to preload more assets You want to grab their attention to pull them back You want close their banking session after 5 minutes of inactivity. (Jerk!) You want the site to sneak off the screen and see if they notice ;-) Nick Zakas wrote a script for YUI3 to handle these cases. His writeup has a great description of t

Setting cookies with jQuery jQueryでCookieの操作を超簡単に行える「jQuery Cookie plugin」。 このjQueryプラグインを使えば、Cookieさえ１行で簡単に設定できてしまいます。 以下のコードを使って、example というクッキーのキーに foo という値を設定することが出来ます。有効期限は見ての通りですが、7日間有効 $.cookie("example", "foo", { expires: 7 }); パスの設定も以下のように行うことができます。 $.cookie("example", "foo", { path: '/admin', expires: 7 }); ブラウザに対するデータ設定として最もお手軽に使えるCookieですが、これはますます活用できちゃいそうですね。 プラグインのページはこちら 関連エントリ Java

There is an updated version that does not require jQuery, which is available here: https://github.com/js-cookie/js-cookie The syntax is different from that described in this post, although the Github page includes code to allow for backward compatibility. Set a cookieSetting a cookie with jQuery is as simple as this, where a cookie is created called "example" with a value of "foo": $.cookie("examp

コンピュータに指定フォントが入ってるかチェックできるjQueryプラグイン「jquery-fontavailable」 2009年07月06日- jquery-fontavailable - Google Code コンピュータに指定フォントが入ってるかチェックできるjQueryプラグイン「jquery-fontavailable」。 ページの font-family でフォントタイプを指定したりしますが、そのフォントが入ってるかどうかを調べて挙動を変えることができるjQueryプラグインが存在するようです。 $(document).ready(function() { if($.fontAvailable('tahoma')) { // フォントが存在したら行う処理 } else { // フォントが存在しなかったら行う処理 } }); 動作のメカニズムとしては、まず、ダミーのhidde

Code Archive Skip to content Google About Google Privacy Terms

JavaScriptで日付をTwitter風に○分前といった表記に変換できるライブラリ「niceTime」 2009年07月22日- Recursive “pretty date” - James Padolsey JavaScriptで日付をTwitter風に○分前といった表記に変換できるライブラリ「niceTime」。 ここで紹介されている関数を使えば、JavaScript の Date オブジェクトに渡せる文字列を渡せば、何分前といった表記に自動で変換してくれます。 niceTime( "Sun Mar 01 20:20:02 +0000 2009" ); のように書くと、 "4.65 months ago"  といった感じに変換 niceTime( "July 19, 2009 12:06:00" ); のように書くと "26 seconds ago" といった感じに変換 ちょこっ

I recently required a pretty-date function to format some twitter dates; I knew there were already quite a few of these floating around the net; but I wanted to give it a try myself: Regular pretty-date: Note: Remember, pretty-dates are not meant to be accurate; they’re meant to be “pretty” – once you go past months it does get pretty inaccurate; afterall, logically, when we’re talking about time

入力中に今のフィールドが何文字制限なのか分かりやすく表示できるjQueryプラグイン「Input Limiter」 2009年07月24日- Input Limiter 入力中に今のフィールドが何文字制限なのか分かりやすく表示できるjQueryプラグイン「Input Limiter」。 通常は、このフィールドは何文字以内などと書いておいて、サブミット後にチェックという方式だと思いますが、Input Limiter を使えば、入力が始まると同時にヒントが現れ、フィールドが何文字制限なのかというのをポップアップしてくれます。 デモページ 横にちょこっと表示するよりも、入力している人にとっては非常に分かりやすい見せ方ですね。 $(function() { $('textarea').inputlimiter({limit: 100}); }); jQueryプラグインということで初期化も上記のよ

jQuery Plugin: Input Limiter Default Textareas This textarea will show the limiter info on two lines Since this text area is wider it will show the limiter info on one line Code: $('textarea').inputlimiter(); Limit by Words This textarea only allows ten words Code: $('#textarea3').inputlimiter({ limit: 10, limitBy: 'words', remText: 'You only have %n word%s remaining...', limitText: 'Field limited

Overview This jQuery plugin will allow you to limit input into form fields. It can display a message as the user types to let them know how many characters they have remaining. Use Options Demonstration Download Source Found a bug? Enter a New Issue Use jQuery is required to use this plugin. Examples: Limit all textareas to the default limit of 255 characters: $(function() { $('textarea').inputlim

Мой отец, правда, говорит по-русски, но лишь потому, что служил в армии. В итоге бесконечные проблемы дома надломили отца — он начал пить. Поэтому я и сбежала из дома, как только предоставилась такая возможность. Я мечтала о длинных волосах и плакала каждый раз, когда меня стригли. Уже осенью я нашла себе крутого парня, появились новые друзья. ... Read more Фармакокинетика тадалафила у лиц со слаб

iPhone-like password fields using jQuery // DECAF・blog digitale kommunikation 最後の文字だけ読めるiPhoneのパスワードフィールドそっくりな入力フィールド作成用jQueryプラグイン 次のように最後だけ読めるフィールドが作れます。 iPhoneでは次のようになっていて、まさにそっくり。 先日、同じようなエントリを紹介しましたが、以前よりもソックリなところがいいですね。 関連エントリ 何を入力したかが分かるiPhoneスタイルのパスワード入力フィールド実装jQueryプラグイン

ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」 2009年10月05日- ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」。 Flashでよくある〜％読み込みました、みたいなものをJavaScriptで実現できるみたいです。ページを完全に読み込ませてから見てもらいたい場合に使えそうです。 読込みバーが右に伸びていって進捗表示 終わったらアニメーションでカッコよく画面切り替え ページ表示したところ 必要なJavaScriptとCSSを<script>と<link>で読み込んだら、次のように初期化するだけで実装できます。 <script type='text/javascript'> QueryLoader.init(); </script> スクリプトのダウンロー

PRESS RELEASE You might of seen my work around the web. When My Direct Blinds contacted me back in late 2015 with an irresistible offer to help build out their digital assets and join the company with an ownership stake, it was an offer I could not refuse. Web design, interior design and window furnishings shared a common ground and something I could get behind. Thus, the decision was made to end

PRESS RELEASE You might of seen my work around the web. When My Direct Blinds contacted me back in late 2015 with an irresistible offer to help build out their digital assets and join the company with an ownership stake, it was an offer I could not refuse. Web design, interior design and window furnishings shared a common ground and something I could get behind. Thus, the decision was made to end

jScrollPane スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」。 ちょっと前に話題になっていたような気がしますが便利なのでご紹介。 デザインサイトなどで、スクロールを使ってしまうとOSによって見栄えが変わってきてしまって全体のデザインを崩してしまいますが、このプラグインを使えばそういうこともなさそうですし、更に拡張された機能を使うことができます。以下にピックアップします。 デザイニング 次のような自由にデザインされたスクロール付きブロックを実装可能 プラットフォームに関わらずWinXPスタイルのスクロールバー実装 同様にMacOS Xみたいなスクロールバーも実装できます 拡張機能 さらに面白いのが、スクロール内でさらにスクロールさせるという機能。 スクロール要素をネストできます あと、スクローラー外部からの<A>タグをクリックで指定位置にス

jScrollPane example skins (operating system style scrollbars) >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi. Praesent dignissim metus sit amet enim. Nam auctor, neque semper congue sagittis, risus mi commodo pede, nec euismod magna libero at sem. In enim magna, vestibulum et, b

jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS. jScrollPane is crossbrowser, working on all browsers that support jquery and it also degrades gracefully. If a user's browser doesn't support jQuery or has J

jQuery - zooma pluging example マウス位置を拡大して表示できるjQueryプラグイン「zooma」。 次のようにカーソル位置を拡大して別のブロックに表示することが出来るプラグインです。 実際に１から実装するとなると結構大変ですが、jQueryプラグインなので次のように簡単に初期化することが出来ます。 var zoomImgUrl = $('#zoomImageRefContainer').find('a').attr('href'); $('div#slideshow').zooma('slideshow', 'zoomBlock', zoomImgUrl); あまり使うことはないかもしれないけれど覚えておけば使うことがあるかもしれませんね。

jQuery zoom plugin: zooma example Autor: Ignat Alexeyenko Project details can be found at http://code.google.com/p/zooma/ jQuery plugins repository http://plugins.jquery.com/project/zooma Example 1. To use zoom feature: Please, click at the 'ZOOM' link to activate zoom. Place mouse pointer above the thumbnail image. Remove mouse over thumbnail image to exit zoom mode.

大量のアイテムもスッキリとリスト形式のメニューにしてしまえる「jQuery ListMenu Plugin」 2009年10月22日- jQuery listmenu plugin - javascript list navigation menu control 大量のアイテムもスッキリとリスト形式のメニューにしてしまえる「jQuery ListMenu Plugin」 次のように大量のアイテムがあったとしても・・・ ↓↓↓↓↓↓↓↓↓↓↓↓↓ jQuery ListMenu Plugin があれば次のように超スッキリさせることが出来ます。 使い方はいたって簡単で、次のようにコードを書けば最低限実装できます。 $('#demo1').listmenu(); $('#demo1').listmenu( { option } ); で各種カスタマイズも可能です。 日本のサイトとしては日本語が

This jQuery plugin, developed in the iHwy Labs, allows you to easily convert a long, hard to navigate list into a compact, easily skimmable ‘first-letter’ based menuing system, allowing quick and ‘out-of the-way’ access to hundreds of items. Users hover their mouse over a letter and a columnized list of all of the list items that start with that letter appear in a submenu. Mousing off of the lette

This jQuery plugin, developed in the iHwy Labs, allows you to easily convert a long, hard to navigate list into a compact, easily skimmable ‘first-letter’ based menuing system, allowing quick and ‘out-of the-way’ access to hundreds of items. Users hover their mouse over a letter and a columnized list of all of the list items that start with that letter appear in a submenu. Mousing off of the lette

PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ

This page has a dynamically scaling background image. Go ahead and change your browser size. This image is not actually the body background but an image set to display behind all of your other content. Options helpful for use with maxImage as a background image or background slideshow are verticalAlign:(top|bottom), horizontalAlign:(left|right) and zIndex:(integer). I might add a few more soon. Yo

TwitterのFriendsやFollowersをページにアイコン付きで表示するWidget実装jQueryプラグイン 2009年10月27日- TwitterのFriendsやFollowersをページにアイコン付きで表示するWidget実装jQueryプラグインが公開されました。 JavaScript のみで実装されているという点と、jQueryベースでカスタマイズも超簡単というなかなか注目のプラグインです。 デモ１ - フォロワーリストをアイコンで表示。時間を置くと自動でページ送りされます。 デモ２ - デモ１に追加で、更にフォロワー数を上に表示してみている例。 デモ３ - 1ラインでフレンドリストを表示する例 デモ４ - フル機能の実装例。フォロワー数、フレンド数、アイコン集、更に最近の関連ユーザの発言が見れるようです 微妙にアニメーションしてクールなのもjQueryのよいところ

ドラッグ＆ドロップで数値の設定が出来る便利ＵＩを実装できる「jquery-drag-spinbox」 2009年10月30日- ドラッグ＆ドロップで数値の設定が出来る便利ＵＩを実装できる「jquery-drag-spinbox」。 普通、数値入力というと、ボックスに直接入力したり、ボタンを連打したりして上下させますが、このSpinBoxを使えば、画像上でクリック→上 or 下にドラッグすることで簡単に数値の調整が出来ます。 デモページ 名前の通り、jQueryベースで作成されていますので比較的簡単に使うことが可能です。 以下のエントリを参照してください。 HowToSetupJapanese - jquery-drag-spinbox - Project Hosting on Google Code

水色のスピン部分を上下にドラッグすると、テキストボックスの値が増減します。 上移動で増加、下移動で減少となります。 Webの方ではこういったコントロールはあまり見ないですが、Windows等のアプリケーションのコントロール等にはしばしばお目にかかります。 意外と汎用性が高いので、操作されている方にとっては、「欲しいな」って思われる方もいるでしょう。 特長 ・汎用性がある：1,2マスの細かな移動から、100,1000ピクセル単位のピクセル移動まで、何でも。 ・コンパクトに設置できる：テキストボックスの右に20ピクセル程のスペースに収まります。 ・利用環境に対応：ノートＰＣ等でホイールが無くても大丈夫。基本的なマウス操作のみ。 設置方法 HowToSetupJapanese - jquery-dorag-spibox Google Code googleコードに置いてみました。チェックしてみて

This domain was recently registered at Namecheap.com. Please check back later! downloadify.info 2022 著作権. 不許複製 プライバシーポリシー

ブラウザ上で様々なファイルを作ってダウンロードさせられる「Downloadify」。 Downloadyfy を使えば、JavaScript によって文字列を組立て、それをサーバサイドに保存することなく直接ダウンロードダイアログを出して利用者にダウンロードしてもらうことができます。 サーバに保存する必要がないので、サーバサイド言語が使えない環境であってもつかえてしまうのが特徴です。 例えば、この仕組みを利用したサイトの「starter」。 このサイト自体便利で、クラス名、ネームスペース、関数のパラメータなどを入力すると、jQueryプラグインのスケルトンコードを生成してくれるものなのですが、「DOWNLOAD」ボタンでその生成されたコードを直接ダウンロードすることができます。 「DOWNLOAD」ボタンを押すと、ファイル名が入った状態でダイアログが現れ「保存」ですぐダウンロードできます。