ModernizrはHTML5/CSS3を機能単位で実装状況を判断するJavaScriptライブラリ。 ModernizrはJavaScript製のオープンソース・ソフトウェア。数年前まではブラウザによって動く機能、動かない機能というのがあった。それらを吸収するライブラリとしてPrototype.js/jQueryなどがもてはやされた。今、時代はHTML5に変わろうとしているが話はさらにややこしくなっている。 テスト WebKitはブラウザバージョンという概念さえ持たない。Google Chromeが日々バージョンが変わっている。IEもバージョンが増えており、ブラウザによってHTML対応具合が細かく違っている。そんな中でHTML5を進める際に使ってみたいライブラリがModernizrだ。 Modernizrはブラウザごとの判断ではなく、機能ごとに使える/使えないを判断するライブラリだ。例え

以前のメモ（ JavaScript の substr には気をつけた方が良い - p4lifeのメモ）では，substr メソッドを使って Firefox，IE 両方に対応するゼロパディングを実装した．ただ，冗長になってしまって綺麗なコードではなかった． // substr を使うと length を入れるのが面倒 var d = new Date(2007, 6, 10); var m = "0" + (d.getMonth() + 1); var a = "0" + d.getDate(); var s = d.getFullYear() + m.substr(m.length - 2) + a.substr(a.length - 2); // s == "20070710" → 期待通り しばらくして，コメント欄で slice メソッドを使えば良いということを教えてもらったので，さっ

aaencode - Encode any JavaScript program to Japanese style emoticons (^_^)

Be aware Using jjencode for actual attack isn't good idea. Decode easily. jjencode is not utilitarian obfuscation, just an encoder. Too characteristic. Detected easily. Browser depended. The code can't run on some kind of browsers.

Plugins | jQuery Plugins 画像にぼかし効果を与えられるjQueryプラグイン「Image Blur」 $(element).blurimage(); のようにするだけで画像に次のようなぼかし効果を与えられます。 使い方はアイデア次第ですが、なかなか面白いですね。 関連エントリ HTMLで書けるパワポ風プレゼンテーション実装jQueryプラグイン「Slippy」 画像にクリック位置に注釈を入れられるjQueryプラグイン

テキストサイズに応じてtextareaを自動でサイズ調整してくれるjQueryプラグイン「jQuery.elastic」 2010年06月22日- jQuery.elastic テキストサイズに応じてtextareaを自動でサイズ調整してくれるjQueryプラグイン「jQuery.elastic」。 普通テキストエリアというと、サイズは固定で、長い文書を入れると最初の方にいれたテキストがわかりにくくなってしまいますが、改行を入れると自動でテキストエリアが広がるあの便利な機能をjQueryで実現出来ます。 テキストサイズに応じて伸縮します。 改行を入れると縦に広がります。最初に入れた文書も確認しつつ長文を入力できます。 実装の方法は無茶苦茶簡単。 $('textarea').elastic(); textareaはデフォルトでこの動きになって欲しいですが、このプラグインがあれば１行で全てのt

HTMLの任意のElementをDrag & DropできるようにするためのJavaScriptライブラリです。Drag & Drop以外の機能はありませんが、その分ロジックが簡潔なので、様々な用途にソースコードを改良しやすいと思います。 また、インスタンスを生成するだけでDrag & Dropできるようになるので、お手軽です。 Draggable.jsをロードします。 <script type="text/javascript" src="./Draggable.js"></script> 動かしたいElementのスタイルをposition:absoluteに設定します。 <div id="tutorial" style="position:absolute;">Tutorial</div> 引数にElementのIDを渡してDraggableオブジェクトをnewします。 <scrip

jDigiClock - Digital Clock (HTC Hero inspired). クールなデジタル時計ウィジェットを設置できるjQueryプラグイン「jDigiClock」。 次のようなデジタル時計を簡単に設置することが出来ます。元となっているのはHTCのHero ClockというAndroidアプリケーションらしいです。 jQueryなので次のように簡単に実装できます。 $('#digiclock').jdigiclock({ // 設定 }); 面白いですね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 自由な位置にalert表示できるjQueryプラグイン「Feedback UI Plugin」 ajaxファイルアップロードに使えるjQueryプラグインいろいろ シンプルな紙芝居を実装できるjQueryプラグイン「sexyCycle」

All your standard libraries will be assimilated into our JavaScript collective. Resistance is futile. Welcome to Locutus, where the boundaries of coding languages blur. We’re a dedicated collective developers on a mission to explore the possibilities of porting standard libraries from various programming language (Go, Ruby, PHP, C) to JavaScript. Our journey is one of discovery, innovation, and so

GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 2009年12月01日- GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」。 自分で実装するとなるとかなり骨が折れそうなこの機能もjQueryプラグインで簡単に実装できるみたいです。 マウスホイールでズームし、ドラッグして地図移動が可能 ズームとか移動のコントローラーを付けることも可能で、これなら初心者にも簡単に気付いてもらえますね。 設置はjQueryを使うので、マークアップでズーム用に画像を数枚置いておき、$("#viewport").mapbox({mousewheel: true}); のように初期化するだけでOKです。 オプションも多数あるのでカスタマイズも出来ます。 ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高い

要素を英数字や日付などでソートする機能ををJavaScriptに簡単機能追加できる jquery.datasort.js が公開されています。 例えば、次のようなHTMLがあったとします。 <ul class='n'> <li>4.09</li> <li>4.10</li> <li>67.8</li> <li>100</li> <li>-98</li> <li>67.7</li> <li>23</li> </ul> datasort メソッドを実行すると次のようにソートが可能。 なんと、これを実現するためにJavaScriptコードはたった以下の1行だけ。 $('ul.n li').datasort({datatype: 'number', reverse: true}); 上記は、数字でソートを行っていますが、以下のデータ型についても要素を簡単にソートが出来て非常に便利です。 アルファベ