ColorPicker - jQuery plugin
About A simple component to select color in the same way you select color in Adobe Photoshop Last update 23.05.2009 - Check Download tab Features Flat mode - as element in page Powerful controls for color selection Easy to customize the look by changing some images Fits into the viewport License Dual licensed under the MIT and GPL licenses. Examples Flat mode. $('#colorpickerHolder').ColorPicker({
Chrome Experiments
Chrome Experiments is a showcase of work by coders who are pushing the boundaries of web technology, creating beautiful, unique web experiences. You'll find helpful links throughout the site for creating your own experiments, and you can also explore resources like WebGL Globe and our workshop of tools.
完全に状況を掌握した画像の遅延読み込みの実現 - latest log
IE8の挙動について追記しました。 IE8は、img.complete は 画像読み込みでも true になりません(falseのままです)。 そのかわり、img.readyState が "complete" になります。 JavaScriptでの画像の動的/遅延読み込みといえば (new Image).src = URL; なんですが、 タイムアウトやエラーの状況を把握したい時もあったりします。GoogleMapライクなアプリを作ってるときとか。 今回ちょっと必要になったのでまずは調査から。 以下のコードで、存在しないファイル(missing.jpg)を読み込ませ、実行経路を確認してみます。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://w
画像の先読み - Backstage of theater.js
実現のためのコードはいたってシンプルです。以下のようにします。 var imgObj = new Image(); imgObj.src = "sample1.jpg"; JavaScriptでImageオブジェクトのsrcプロパティに画像アドレスを設定すると、その時点でブラウザが画像をダウンロードするのを利用しています。 以下は引数に画像アドレス配列を渡すと、一括して先読みしてくれる関数です。 function preload(imgs){ for(var i = 0; i < imgs.length; i++){ var imgObj = new Image(); imgObj.src = imgs[i]; } } preload(["sample1.jpg", "sample2.jpg", "sample3.jpg"]); ・・・が、これだけでは先読みの終了どころか、本当に先読みして
JavaScriptで最大サイズ以上の画像を縮小して表示する - ギジュツメモ
TinyMCEの拡張プラグインで画像を縮小表示しているものがあったので 画像のサイズをいじれるのだと確信…イロイロといじってみました。 テストケースとして既定の最大サイズを超える画像を最大サイズに縮小します。 今回既定値は横幅250pixとしました。 たくさん失敗しましたが同じような失敗をした人のために失敗ケースも載せています。 とりあえず適当な感じで <IMG src="image.jpg" align="left" name="face_image"><br /> <script language="javascript"> if(document.face_image.width > 250){ document.face_image.width = 250; } </script> DOMベースだと <IMG src="image.jpg" align="left" id="f
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing
最速インターフェース研究会 :: JavaScriptで作ったお絵かきBBS
http://la.ma.la/bbs/ コード整形してだいぶ汎用性を高めたつもり。 わかりやすいデモとしてお絵かきBBSを作ってみた。 -IEの場合はVMLの自由曲線を使って描画します。 -他のブラウザの場合は1ドットのspan要素を使って描画します。 -GDを使ってサーバー側でpng画像に変換します。 firefoxかoperaの場合は2GHz以上推奨。書き込むたびにガンガン重くなる。 ---- この手のツールはすでにFlashやJAVAアプレットで優れた実装があるわけだけど、なんでわざわざJavaScriptで作るかというと。 まず起動が早いので、思い立ったらすぐに書けるという点。それから、FlashやJAVAアプレットは、表示エリア内にしか書き込めないのに対して、JavaScriptの場合はhtml中のほかの要素の上に書き込むことができるというメリットがある。 とりあえずここまで出
最速インターフェース研究会 :: JavaScriptでペイント、開発版
少し留守になるかもしれないのでとりあえずアップ。保存ルーチンをまだつけていない。 http://la.ma.la/misc/plot/draw2.html -zで一手戻す、+/- or q/a でブラシサイズを変更。 というキーバインドをとりあえず実装。作りこめば色変更とか、直線描画とかも色々できるだろうな。 ただ、この手書き機能を組み込んだチャットと、そのチャットを組み込んだWikiを作るというのが目的なので単体であまり作りこむつもりはない。 IEの場合、VMLを使った描画にしてみた。MSNメッセンジャーの手書きモードと、書き心地はそう変わらないが、やっぱり線が増えてくると重くなるのでそれほど書き込むことはできない。 DIV要素を足していく方式の描画エンジンをまず作ってIEの場合のみVMLを使った関数で上書き、という方向性で。 VMLはもう終わっている技術なので。SVGが使えれば一番いい
Litebox- Same great taste, less calories
Litebox Check out the front page If you haven't been to the front page in some time, check it out. I've started blogging about some tips and tricks. Expect some full featured scripts some time soon. What is it? Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Aaron Vanderzwan | Full-Stack Wordpress Developer with 17 years experience
はてなブログ | 無料ブログを作成しよう
http://ma.la/mirrorman/wiki.cgi/JavaScript%E3%81%A7%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D