フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
script.aculo.usベースのリッチGUIコンポーネント作成JavaScriptライブラリ「Spinelz」:phpspot開発日誌
script.aculo.usベースのリッチGUIコンポーネント作成JavaScriptライブラリ「Spinelz」 2007年01月31日- Spinelz - JavaScript libraries Spinelzはscript.aculo.us.をベースに開発されています。 Ajaxや、script.aculo.us.の持つアニメーション効果を最大限に活かした、ちょっと便利な機能を提供しています。 script.aculo.usベースのリッチGUIコンポーネント作成JavaScriptライブラリ「Spinelz」。 タブ、メニューバー、ナビゲーションパネル、カレンダー、グリッド、ツリービュー等リッチなコンポーネントを実現できます。 以下にいくつか紹介。 タブボックス メニューバー ナビパネル カレンダー グリッド ツリービュー コンポーネントはＣＳＳによってデザインされているため、
JavaScriptでスターレーティングを行うライブラリやサービス色々:phpspot開発日誌
JavaScriptでスターレーティングを行うライブラリやサービス色々。 スターレーティングとは最近ではお馴染みの、５つ表示された星をクリックするだけで投票がAjaxで行えるものです。 ライブラリ jQuery Star Rating Super Interface! - jQueryを使ったライブラリ Unobtrusive AJAX Star Rating Bar - 以前、当ブログで紹介したAjax+PHP+MySQLな投票ウィジェット。 prototype.jsを使ったものも欲しいところでしょうか。 サービス サイトにレーティングウィジェットを簡単設置「Star It!」 - ページに貼り付けられるウィジェットです 関連エントリ JavaScriptで使えるカラーピッカー作成ライブラリまとめ ブラウザ上で動作するOSのまとめ JavaScriptを使った各種WYSIWYGライブラ
最速インターフェース研究会 :: livedoor Readerを十字キーで操作するためのGreasemonkeyスクリプト
思うところあって作ってみた。カーソルキーだけで読めます。IME有効無効に関わらず使えます。 http://la.ma.la/misc/userjs/ldrkeybindforldr.user.js フィード一覧フォーカス時 ↑ ： 前のフィードを選択 ↓ : 次のフィードを選択 → : 開く 記事画面フォーカス時 ↑ : 前の記事に移動 / 前のフィードに移動 ↓ : 次の記事に移動 / 次のフィードに移動 → : ピンを付ける / 外す ← : フィード一覧にフォーカスを移す
ブラウザ上で画像やテキストを自由に編集する方法 | P O P * P O P
ご存知の方も多いかと思いますが、ご存知ない方のためにちょっとしたTipsをご紹介。Internet Explorer5.5以上限定ですが。 Webサイトをブラウザ上で自由に編集できてしまうテクニックです。やり方は簡単。下記のJavaScriptをアドレスバーに打ち込むだけ。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 こんな（↓）感じです。 ドラッグ＆ドロップで画像を動かせる他、テキストも自由に書きかえることができます。これはコンテンツをブラウザ上で編集できる「contentEditable」というタグを活用したTipsですね。 » contentEditableについて スクリーンショットを取る時にいらない画像を簡単に消したりできるのは便利かも。diggからの情報でした
Litebox/Lightboxの使い方
Posted by: Hirotaka Ogawa @ January 18, 2007 05:35 PM | yujiroさんとこのLiteboxやLightboxの記事で、配布されているJavaScriptファイルやCSSファイルを修正されていますが、それだとオリジナルのLitebox, Lightboxが更新されるたびに同じことをしなくてはならなくなります。 小粋空間: Litebox 1.0 の rel 属性を自動付与する 他 それは面倒だ、美しくないと思ってしまったので、このエントリーではもう少しスマートなやり方を書いておきます。何かの参考になる場合もあるでしょう。 まず、スタイルシートはそもそも上書きして使うものです。下のようなスタイルシートをlightbox.custom.cssとか適当な名前で生成しておき、lightbox.cssより後に読み込まれるようにしておけばオリジナ
Firefox の JavaScript はいつのまにかプロパティの順番が変わることがある - IT戦記
ちょっとした発見があった Firebug のコンソール(F12で開く)で要素のプロトタイプを for in してみると // 要 Firebug for (var n in HTMLDivElement.prototype) console.log(n); style className id getAttribute : :プロパティの並び順がサイトによって全然違うことに気が付いた いろいろ試してみた どうやら、よく使われるプロパティが上にくるようだ。高速化のためだと思う その並び替えのアルゴリズムはよく分からないが、一回参照しただけで順番が変わる場合もあれば、何回参照しても順番が変わらない場合もあった。
こんなに JavaScript やってるのに知らなかった基本文法「if in」 - IT戦記
if 〜 in なんてあったのね。。。 知らなかった！ 使い分け ３番めが if in オブジェクトが真か偽か if (obj.property) { // ... } オブジェクトにプロパティがあるかは置いといて undefined ではないことを確かめる if (typeof obj.property == 'undefined') { // ... } オブジェクトにプロパティがあるか。 if ('property' in obj) { // ... } オブジェクト自体（プロトタイプを含まない）にプロパティがあるか if (obj.hasOwnProperty('property')) { // ... } まとめ いっぱいあるなあ。 大抵、一番上のでいいがいろいろ細かい条件があるとたまにどれも必要になるときがある。 いままでは、if in を知らなかったので困ったこともあったなあ
JavaScriptで図形を描くHTML要素「Canvas」の実例
JavaScriptを使ったAJAXが昨年前半まで大いに注目を集めていましたが、その根本になったJavaScript自体は古くからあり、AJAXというのは新しい応用法みたいな側面が非常に強かったのが特徴です。 しかし今回紹介する「Canvas」要素はそういうのとは明らかに一線を画しています。グラフの描画、写真合成、アニメーションなどが可能で、実際にはMac OS X のDashboardに初導入されています。そのため、サポートしているブラウザはSafariとFirefox 1.5以降のGecko1.8ベースのブラウザ、それからOpera9となります。また、この「Canvas」要素は「HTML 5」としても知られるWhatWG Web applications 1.0仕様の一部でもあるそうです。 といろいろ書いても実感がわかないと思うので、いろいろな実例を見てみましょう。 まずは簡単なフレー
JsonML を使う高速テンプレートエンジン「JsonML.Template」 - IT戦記
というのを作ってみた JsonML とは JSON を使ったマークアップ言語です。 http://jsonml.org/ 使いかた // テンプレートの作成 // <div class="section"><h2>タイトル</h2><p>本文本文本文</p></div> var t = $T(['div', {class: 'section'}, ['h2', 'タイトル'], ['p', '本文本文本文本文'] ]); // 要素の生成 document.body.appendChild(t()); // 呼び出すだけ // テンプレートの作成 var t = $T(['div', {class: 'section'}, ['h3', function(c){return c.getVar('title')}], // タイトルを動的に生成 ['p', function(c){retur
Windows Vistaガジェット入門：CodeZine
はじめに Windows Vistaでは、デスクトップ上の右側（日本語版の既定の設定）に垂直のバーが表示されています。これは、「Windows Sidebar」と呼ばれる新しいツールで、この垂直バーの中で「ガジェット」という小さなプログラムを実行することができます。Windows Vistaには、時計やカレンダーなど、いくつかのガジェットが最初から組み込まれていますが、ユーザーは自由にガジェットを追加したり、解除することができます。Windows Vista標準では「RSSフィードのヘッドライン」「メモ」「時計」「カレンダー」「株価」「連絡帳」「天気予報」などが用意されていますが、さらにガジェットをダウンロードして、簡単に追加していくこともできます。ダウンロード可能なガジェットについては、以下のページを参照してください。Windows Live Gallery 現在は、Windows L
Collection & Copy - 相対パスを絶対パスに変換する
JavaScriptIE 6、IE 7、Firefox 2.0、Opera 9で確認。 function absolutePath(path){ var e = document.createElement('span'); e.innerHTML = ''; return e.firstChild.href; } alert(absolutePath('/')); 関連リンクJavaScriptな日々 | 相対パスを絶対パスに変換する方法Imageを使っています。 getAttribute href bugBug Report: getAttribute(”HREF”) is always absolutegetAttribute("href",2)とか。既存のa要素のhrefは上記の方法で絶対パスになるけど、document.createElement('a').href='/'では、
JavaScript のスコープに変数を動的に追加する - IT戦記
JavaScript の変数はすべて関数オブジェクトの開始時に生成される function f() { // この時点で変数 a は生成されている a = 1; var a; alert(a); // 1 }; たとえ、関数中にブロックがあろうとも function f() { // この時点で変数 a は生成されている { a = 1 } { var a } alert(a); // 1 } たとえ、with スコープがあろうとも function f() { // この時点で変数 a は生成されている a = 1; var b = {}; with(b) { var a; // この var は直近の with スコープではなく、 // 関数スコープに対する var となる a = 2; } alert(a); // 2 } with スコープでは、変数を動的に追加することができる f
Javascriptでの小数計算について - 技術メモ帳
javascriptというわけではないのだが、 PHPやりつつjavascriptいじるとハマります。 二進表記で表現できないものがあるため、 循環小数になってしまうとかそういった話だった気がする。 ご覧の通り、まったく詳しくない。 0.1 を 10 回足すと、どうなるでしょうかという話。 0.1 + 0.1 + 0.1 + 0.1 + 0.1 + 0.1 + 0.1 + 0.1 + 0.1 + 0.1 => 0.9999999999999999 とりあえず、自分の知っている対策は それぞれを n 倍してから 最後に n で割るという方法。 nは場合により使い分ける。 (0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10) /
IEで印刷できないページ - ヒルズで働く@robarioの技ログ
iframeを入れると何故か検索が出来なくなる とのことです。すみません。読み間違えていました。 ところでコードを読んでいて気付いたのですが、以下のようなframeを使ったコード <frameset name="tags">で、Yappoさんの例と同じように検索・印刷でエラー出すことができました。 （細かい話ですが、検索時のエラーコードはiframeの場合は104だったのがframeでは287になりました） 既出ネタかどうか分からないけど、iframe name tagsでググっても情報でて無いので書いておきます。 特定のタグやname属性をHTML中に記載するとIEのCtl-Fでのページ内検索やプリント機能が使えなくなります。 確かに res://C:\WINDOWS\system32\shdoclc.dll/preview.dlg とやらでJavaScriptエラーが起きて印刷できませ
ウノウラボ Unoh Labs: JavaScriptでクリップボードを使う(IE/Firefox)
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
TAKESAKO @ Yet another Cybozu Labs: Web2.0時代のAjax Binary Hacks
※公開用にいくつか手を加えてあります 前フリが長いとのツッコミがありましたので、今回の発表内容を少し要約してみたいと思います。 1. GIF Format Hacks (Server side) まずは、任意のpixelサイズ（幅・高さ）を持った画像ファイルを固定長の35byteで出力する方法 #!/usr/bin/perl use strict; use warnings; sub create_gif { my $size = pack "S2", @_; return "GIF89a$size\xf0\x00\x00\x00\x00\x00\xff\xff\xff," . "\x00\x00\x00\x00\x01\x00\x01\x00\x00\x02\x02L\x01\x00;"; } print "Content-Length: 35\n"; print "Content-Ty
ウノウラボ Unoh Labs: JavascriptライブラリをJSANへアップする手順
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://labs.cybozu.co.jp/blog/kazuho/archives/2007/01/e4x-xss.php
createElement と backgroundColor で IE をクラッシュさせる - IT戦記
