jQuery Upload Thumbs - 画像アップロード前にプレビューを表示させる jQueryプラグイン - Dekasu.net
Webページから <input type="file"> を使って画像を選択したときに、その画像のプレビューをその場に表示させて画像の確認ができる jQueryプラグイン です。 CSS で画像の大きさを制限すれば、サムネイル表示になります。 アップロードされた画像の差し替え、画像のファイル選択ボタンにも対応しています。 HTML5 の File API という機能で表示させます。（近年のブラウザで対応） HTMLページが HTML5 形式でなくても（例えば XHTML 1.0 でも）、ブラウザが HTML5 に対応していれば使えると思います。 まずは下記サンプルをご覧ください。 Download: スクリプトのダウンロード jquery.uploadThumbs.js (6kb) .. 「対象をファイルに保存」で保存してください。 ※呼び出す HTML と JavaScript のソース
Firebugで作るGreasemonkeyスクリプト〜入門と実践(From Kanasan.JS) | Blog.37to.net
最終更新日 Wed, 29 Apr 2009 01:29:41 +0900 最後のコメント Sun, 25 Jan 2015 19:08:17 +0900 最後のトラックバック Wed, 11 Mar 2009 15:49:00 +0900 ブックマーク 遅くなりましたが、先日に開催された、Kanasan.JS Greasemonkey チュートリアル読書会のレポートです。 せっかくなので、読書会の内容を元にGreasemonkeyスクリプト作成の「入門」「実践」「Tips」の3本立てでまとめてみたいと思います。 今回の開催はKanasan.JSの主催をkanasanから引き継いで、初めての開催ということもあり、とても緊張しました。 途中までは無難に進んでいたのですが、後半は段取り不足が出てきた感じでした。参加者の方々にはご迷惑をお掛けしました。 Greasemonkey チュートリアル読
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
canvasが手軽にウェブで試せるアプリFirstCanvasを作ったよ - 三等兵
http://sandai310.com/firstcanvas/ canvasをウェブで簡単に体験できます。 canvasの素晴らしい日本語リファレンスはありますが、 http://www.html5.jp/canvas/ref.html 少し難しいのでイメージがわきません。じゃあ触って試せばいいじゃーんてことですが、イヤだめんどくさい！という動機で簡単にウェブ上で試しながら機能が確認できれば楽だなってことで習作として作りました。 とりあえず位置付けとしてはcanvasの学習アプリってところで。 コンセプト 誰でも手軽にウェブでcanvasのプログラミングができる、というコンセプト。たぶん誰でもできると思います。適当に見よう見真似でいじいじできますのでいじいじしてください。できなくてもいじいじいじけないでいじいじしてください。実はいじいじ言いたいだけです。 できること canvasで使え
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」:phpspot開発日誌
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです（ブラウザごとにクッキーに依存した文字数制限などは存在すると思います） こういうことを１からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ
input要素にも使えるjQueryのロールオーバープラグイン - Rewish
jQueryプラグインの習作をするために作成したモノではありますが、プラグイン化したことでかなり楽に使えるようになったので、気が向いたら使ってみてください。 ライブラリについて HTMLを汚さず、簡単に画像のロールオーバーを実装できます。 ダウンロード jquery.rollover.js - v1.0.4 ライセンス MIT License 主な機能 HTMLで指定するのは初期表示の画像だけ 指定された箇所でも _on が付いている画像は無視 ロールオーバー画像をプリロード 拡張子は何でもOK (png, jpg, jpeg, gif, etc…) ロールオーバー画像を示す _on の部分を自由に変更できる 使用方法 画像を用意する example.jpg をロールオーバーしたい場合は、名前の末尾に _on を付けた画像 example_on.jpg を example.jpg と同じデ
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
iframe 関連処理まとめ - Cyokodog :: Diary
iframe 関連の処理で分かったことをこちらにまとめてこうかと思います。コードは jQuery ベースです。 変更履歴 2009.06.17 Safari,Chrome にて動的に生成したiframe内に CSS ファイルを読み込ます方法が分からないとしてましたが、codeなにがし(http://code.nanigac.com/forum/view/488)で教えていただき、記事を修正しました。 iframe 内 を親 html から参照する 同一ドメインであることが前提です。 //iframe 内の window オブジェクトを参照する $('iframe')[0].contentWindow //iframe 内の document オブジェクトを参照する $('iframe')[0].contents()[0] //iframe 内の html 要素を参照する $('iframe
オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その2 | Takazudo Clipping*
自分なんぞがオブジェクト指向とはなんぞと語るなんておこがましく、「オブジェクトっぽい話」でいいかなーと思っていたのですが、ブックマークするときに「オブジェクト」でタグ付けてる人がいたので、これはいかんと思い、こっそりタイトルを直しました。 2回目の今回は、複数のインスタンスをまとめて操作する方法について書きます。 まんじゅうマネージャー 前回、クラス作ってインスタンスを作ると便利だというところで終わりましたが、便利な点としてはまず、「複数のインスタンスをまとめて操作したり、作ったりできることができる」という点があります。どういうことかというと、とりあえず、以下のサンプルを見てみてください。 まんじゅうマネージャーサンプル まんじゅうを一気に作ったり、隠したりすることができます。 これで賞味期限が切れたりしても大丈夫なはずです。 この機能を作れと言われたら、前回の知識だけは結構厳しいのではな
jQueryでCookieの操作を超簡単に行える「jQuery Cookie plugin」:phpspot開発日誌
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
目次の自動生成を行う jQuery.exTOC.js - Cyokodog::Diary
exTOC は、ページ内の Hn 要素(h1 - h6)に対し、ページ内リンク付きの目次コンテンツを自動生成する jQuery プラグインです。 以下のような特徴があります。 目次 / Hn 要素に対する付番機能 ページ内リンクのスムーススクロール 高いカスタマイズ性 以下は exFixed Plugin / Easing Plugin を併用したデモです。 Demo 導入方法 jquery.js extoc_1_0.js 上記 js ファイルをダウンロードしヘッダー定義内で下記順で jquery.js / extoc.js を読み込みます。 <script type="text/javascript" src="path/jquery.js"></script> <script type="text/javascript" src="path/extoc.js"></script> 目次
JavaScript正規表現メモ。 (JavaScriptでよく使う書き方。) - こせきの技術日記
タイトル変えました。旧タイトル「JavaScriptでよく使う書き方」。よく使うけど毎回忘れる。 正規表現にマッチするかどうか。 RegExp#testを使う。 /abc/.test("abcdefg") // => true String#searchはマッチした位置を返す。マッチしない場合は-1。先頭にマッチすると0でfalseなので注意。真偽値が欲しい場合はString#searchを使わない。 "abcdefg".search(/xxx/) // => -1 "abcdefg".search(/def/) // => 3 "abcdefg".search(/abc/) == false // => true 正規表現の部分マッチを得る。 部分マッチを得るには、RegExp#execかString#matchを使う。execとmatchの速度は大して変わらない。 正規表現のベンチマー
jQueryから簡単に使えるMP3プレイヤー「jPlayer」:phpspot開発日誌
jPlayer : the only CSS styleable jQuery mp3 player plugin jQueryから簡単に使えるMP3プレイヤー「jPlayer」 jQueryなので実装がすごく簡単で１行。 $("#jpId").jPlayer({ /* options */ }); 各種オプション指定で柔軟にカスタマイズすることができます。 次のように ready イベントハンドラに再生処理を入れて再生することができるみたいです。 $("#jpId").jPlayer( { ready: function () { $("#jpId").changeAndPlay("../mp3/elvis.mp3"); }, cssPrefix: "my_jp_class"} ); }); 他にも色々メソッドが用意されていて、便利に使えそうです → リファレンスはこちら
jQueryベースでクールなグラフを作成するjavascript「Flot」
twitter facebook hatena google pocket PlotkitやPlotorなど各ライブラリにはそれぞれ奇麗なグラフを作成できるプラグインがありました。 jQueryでもFlotとよばれるクールなグラフを作成できるプラグインが登場しました。 sponsors 使用方法 Flotからjquery.flot.jsをjQueryからjquery.js（v1.2.1）をダウロードします。 <script type="text/javascript" src="http://yourdomain/jquery.js"></script> <script type="text/javascript" src="http://yourdomain/jquery.flot.js"></script> さらにグラフを表示させたい場所に以下を記述します。 <div id="plac
フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」
twitter facebook hatena google pocket フォームなどでよく、デフォルトでテキストが表示されている場合があります。 何を入力すれば良いのかを示しことができるので、ユーザービリティ上有意義な方法です。 jQuery Watermark PluginはjQueryベースでこれが可能です。 sponsors 使用方法 jQuery Watermark Pluginからjquery.updnWatermark.jsを、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.updnWatermark.js"></script> <script type=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://moto-mono.net/2009/07/06/make-thickbox-draggable.html
http://moto-mono.net/2009/06/18/editableselect.html
ブラウザで正規表現のチェックなどができるサイトまとめ | IDEA*IDEA
http://moto-mono.net/2009/06/08/how-to-make-tooltip-using-jquery.html
http://moto-mono.net/2009/06/02/tangohokanjs.html