onsubmit で disable にするやつ
■ onsubmit で disable にするやつ onsubmit で submit ボタンを disable にしてユーザビリティを良くする フォームを送信した時に、submit ボタンを disabled にして二重送信を防ぎましょう、というのがナウなヤングにバカウケ？ そんでもって、ここに書いてあるやつ なら、そこの JavaScript を読み込ませるだけで、自動的に全てのフォームに対して設定が行なわれるので便利。中止ボタン対策もしてあってグッド。 ただ、Deer Park な Firefox で試した所、戻るボタンで戻った場合は disabled が解除されないし、中止ボタンでの復活も効かない様子。 なので、書き直してみました。 var DisableSubmit = { init: function() { this.addEvent(window, 'load', thi
テキストフィールドのフォーカス時に背景色を変更する JavaScript
■ テキストフィールドのフォーカス時に背景色を変更する JavaScript 以下の JavaScript を読み込ませれば、フォームのテキストフィールドにフォーカスした時に、背景に色がつくようになります。今どのフィールドを選択しているのかが視覚的にわかるので便利。 mixi にこの機能がついていたんだけど、onfocus なんてのをいっぱい書いていて非効率的だと思ったので、読み込ませるだけで勝手に全部のフィールドに設定されるようなものを書いてみました。 window.onload = function() { var colorful = new ColorfulInput; colorful.set(); } function ColorfulInput() { this.skip = []; this.color = { 'blur': '', 'focus': '#EEEEEE'
フォームに入力を促すメッセージを出力する JavaScript
■ フォームに入力を促すメッセージを出力する JavaScript input type="text" なフォームに最初から「ここに入力して下さい」みたいなメッセージを薄い色で表示させておいて入力を促すようなのありますよね。なんか、あれを、現実逃避気味に書いたので。 function inputDefault(elm, msg) { this.elm = elm; this.msg = msg; this.color = '#999999'; this.bgColor = '#F9FFF9'; } inputDefault.prototype.set = function() { this._cleared = false; this._defColor = this.elm.style.color; this._defBGColor = this.elm.style.background
パスワードの安全性を教えてくれる JavaScript
■ パスワードの安全性を教えてくれる JavaScript みんな大好き Google さんが、アカウントのパスワードを変更する時にパスワードの安全性を教えてくれるので真似っ子してみました。 最初は処理をパクってこっそり自分だけで使おうと思っていたのだけど、何やら単語の検索をしたりとややこしい事をしているようなので自前で作りました。 動作サンプル 使ってみたい人は、上の動作サンプルを見てパクッて下さい。 例のごとく。 var safe = new safetyCheck(document.getElementById('password')); safe.set(); みたいにして動かします。 コードを見るとわかりますが、かなり単純な計算方法です。Google さんみたいに単語だったら駄目だとかそんな事はありません。文字の種類(英大文字小文字、数字、記号)と文字の長さを元にして計算していま
カーソル位置のセルの上端と横端をハイライトする JavaScript
■ カーソル位置のセルの上端と横端をハイライトする JavaScript 好評の、読み込ませるだけで動く JavaScript シリーズの5段目くらいです。このシリーズもたまってきたので、そのうちまとめます。 Excel とかの表計算ソフトって選択しているセルの列番号や行番号がハイライトされたりしてますよね？table タグ上であれと同じものを実現する JavaScript を書いてみました。 こんなようなテーブルを作らなくちゃいけない事になりそうなんだけど…。 実際には15×20くらいはあるので、チェックを入れる時にすごく使い辛そうですよね。なので、カーソルの位置がわかりやすくなるようにハイライト出来たら便利だろうと思ったんです。 実際の動作サンプル rowspan とか colspan を使って複雑にしていると、上端とか横端の位置を取得するのがやたらと面倒になってくるので、画面上のセル
マウスで引いた線が生き物になる「Manifest」
JavaAppletでできており、線を引く速度や長さ、描く図形に応じていろいろな生き物が生成されます。生み出された生き物はプランクトンみたいにふよふよと漂っているものや、ビクンビクンと動き回るモノまでいろいろです。 遊び方は以下の通り。 実際に動かすには下記ページへ。 manifestOnline Built with Processing 素早く線を引いたり、ゆっくり線を引いたり、長くしたり短くしたり、ささっと描いてみたり、三角形や四角形などなどを描いてみると、次々と謎の生き物に変換されます。 描いた生き物を一掃するにはスペースキーを押します。また、「p」を押すと停止モードになり、「d」キーを押すと開発者モードに突入します。 短い線を素早くさささっと作り出すと、ミジンコみたいなのがいっぱい生産できて面白いことに。また、巨大な生物を作ると描画キャンバスの中で大暴れしてくれます。まっすぐ線を
PHPでCSSを圧縮転送する:phpspot開発日誌
PHP CSS Compressor | iBloom Studios Compressing CSS is a great way to save some bandwidth, especially on more complex sites with stylesheets reaching more than 1000 lines of code. アクセスの多いサイトではCSSによる転送量が馬鹿にならないこともありますが、これをPHPによって圧縮してCSSの転送量を下げようというサンプル。 転送量による課金がなされるような場合にこういった圧縮は有効ですね。 もちろん、転送量やCSSのサイズが少なくなることでクライアントサイドの負担も当然減ります。 (Copyright iBloom Studios) 次のような関数が紹介されていて、この関数を通すことでCSSを圧縮できます。 CS
Glenn Feron - The Art of Retouching
Nature gives us beauty - Artists enhance it ~ Art is imagination having fun. Portfolio 2 coming soon Retouching solutions for any image All photographs retouched by © Glenn C. Feron 2009-All rights Reserved. Shot by various photographers Unless authorized, all images before & after, any resale, distribution, public display or duplication is a violation of all applicable laws and is subject to
JavaScriptを使わずにページのCSSを切り替える:phpspot開発日誌
ページのデザインを利用者好みにカスタマイズできるように、javascript を使い、CSSを切り替えることでデザイン変更できるサイトがありますが、 JavaScriptオフでも同様のことを実装したい場合のサンプル。 JavaScriptを使わずに、PHP+クッキーを使ってページのCSSを切り替えてみましょう。 PHPの知識がなくても、次のサンプルを使えば簡単に誰でもCSSを切り替えることが出来ます。 次のサンプルは、main.css , blue.css , red.css , pink.css というCSSを切り替えたい場合のサンプルです。 (1) まずは、レイアウトを保存するクッキー設定用のPHPスクリプト( index.phpとして保存 ) <?php $valids = array( "main", "blue", "red", "pink" ); $layout = (isse
テキストエリアとかリサイズ可能にする JavaScript
■ テキストエリアとかリサイズ可能にする JavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にある TEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサイズも変わります。 自分はグリモンスクリプトで快適なんですが、サービス提供側でこういう機能を提供してくれたら幸せな人が増えるんじゃね？とか思ったので作ってみました。 実際のリサイズ方法に関しては、愛用している Changing <textarea> Size のコードが大変参考になりました。ありがとうございます。 コードは次の通りです。 メイン部分。 var ElementResizer = {
PHPタグクラウドのチュートリアル:phpspot開発日誌
PHP Tag Cloud Tutorial | Prism-Perfect.net Well, it's actually so simple it's not really a tutorial at all so much as a snippet with a bit of explanation. But I've had some people ask how it's done, so here's how I do it.PHPでMySQLからデータを取ってタグクラウドを作成するサンプルが公開されています。 MySQLテーブルのテーブル名とカラム名(id,クラウド対象カラム名)、 そしてフォントの最大サイズ、最小サイズを指定することで簡単にタグクラウドが生成できます。 次が出力されるタグクラウドのサンプル例 「PHP用タグクラウド生成ライブラリ（HTML_TagCloud）
「Google Webmaster Central」でGooglebotのテストができる - GIGAZINE
GoogleがWebサイト管理者のために「Google Webmaster Central」というのを新しく開設したわけですが、中でも興味深いのがrobots.txtのための機能としてあの「Googlebot」のテストができるという点。通常のGooglebotだけでなく、AdWordsページのクオリティを審査するためのボットである「Adsbot-Google」のテストもできます。 というわけで、実際に使ってみました。 これがトップページ まずは「サイト ステータス ウィザード」というのを使ってみます。 最初にドメインを入力 こんな感じでインデックス登録の概要などが表示されます。このままGoogleサイトマップへ引き継ぐことも可能です そしていよいよ本題、「ウェブマスターのツール」というのを使ってみることにしました。既にGoogleサイトマップを利用しているので、そのアカウントを利用してログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
