IEでjavascriptのエラーをデバッグする方法 - bits and bytes
FirefoxであればFirebugで簡単に問題の場所をみつけられますが、IEでjavascriptのエラーが出ると、素っ気ないうえに意味不明な日本語のエラーメッセージが出てきてお手上げなので、エラーが出ている場所の特定すら困難です。 そんなときでもOfficeについているスクリプトエディタ(前はスクリプトデバッガという名前だった気が....)を使うと、Visual Studioのデバッガとおんなじインターフェイスのデバッガを使ってjavascriptのエラーを出している場所をすぐに見つけることができます。Firebugと比べると極めて重たいですが、関数呼び出しをバックトレースすることもできますし、各スコープでの変数の値を調べることもできるので、これを使わない手はありません。 が、いつもどうやってインストールするのかを忘れてしまうのでメモ代わりに書いておきます。 コントロールバネルのプロ
Nifty Corners
Nifty Corners: rounded corners without images By Alessandro Fulciniti Update This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here. The final version is Niftycube. Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」:phpspot開発日誌
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」 2006年10月22日- Tooltip for forms You can download the entire script from this Zip file フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」。 このライブラリを利用すれば、次の画像のようなツールヒントをフォーム上に出すことが可能です。 実装は、必要なライブラリを読み込んだ後、次のように、tooltipText 属性にヒントを書きます。 <input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"> そして、
IT戦記 - CSS の勉強会をしました
2007 CSS Study Meeting http://artcode.g.hatena.ne.jp/keyword/2007%20CSS%20Study%20Meeting 発表をしましたので資料を置いておきます。 http://usrb.in/amachang/static/cssstudy/200701/ Firefox で動きます。IE でもぎりぎりうごきます。あ、でも、横長な表示域じゃないと崩れる可能性大です。 左右キーで操作してください。また、ソースは実行できるようになってるので、実際に実行しながら読んでいっていただけるとうれしいです。 他に事前に CSS のセレクタのバグリストとプロパティ一覧を作りました。 プロパティ一覧は element.style に辞書アタックを掛けて各種ブラウザから抽出したプロパティです。 http://usrb.in/amachang/stat
Ajaxを勉強しよう
このページはAjaxを勉強してみたい人向けの学習用ページです。サーバーを入れ替えたため一部CGIを使用したものが動作していません。時間のある時に修正します。また、書いてから、かなり時間が経過しているため内容的に古いものもあります。ご了承ください。 Ajaxで利用されるエフェクトに関しては別ページ(Ajax Effect)に移動しました。 Ajax関連書籍に関してはAjax関連書籍一覧ページを用意しました。 Prototype系ライブラリ サンプルプログラム【New !!】のページを用意しましたので、Prototype系のライブラリを利用している方は参考にしてみてください。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 第一章 Ajaxって？ AjaxとRIA AjaxとDHTML AjaxとFlash Ajaxに必要な知識と技術 Aja
Ajaxチュートリアル集126個:phpspot開発日誌
AsH: Top 126 Ajax Tutorials Ajaxチュートリアル集126個。 Ajaxの入門、ブックマークレット、チャット、ドラッグ＆ドロップ、動的コンテンツ読み込み、オートコンプリート、ファイルアップロード Lightbox風画像表示、キーワードサジェスト、インクリメンタルサーチ、プログレスバー、角丸、リストのソート、ツリー、投票など、ありとあらゆるチュートリアルがまとまっていて、やりたいことを実現する際に使えそうです。 これだけのリファレンスがあるんですね。驚きです。 関連エントリ ドラッグ＆ドロップが簡単に出来るJavaScriptライブラリまとめ WEB開発者のためのリソースを集めたリンク集 JavaScriptデバッグツール集 JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法 高速＆シンプルなJavascriptテンプレートシステム『RN
CSSだけでイメージマップを作る有用サンプル:phpspot開発日誌
CSS Image Maps - Flickr-like Technique? Below is a sample image map that's built entirely using CSS and XHTML. CSSだけでイメージマップを作る有用サンプル。 画像の特定部分にカーソルを合わせると、説明を画像上に表示できるCSSとXHTMLサンプルが公開されていました。 JavaScript を一切使っておらず、CSSだけで実現されているところがすごいですね。 JavaScript が要らず、次のような綺麗なHTMLで実現できるところも嬉しいですね。 実装も簡単そうです。 <dl id="officeMap"> <dt id="monitor">1. Monitor</dt> <dd id="monitorDef"><a href="#"><span>Here's my 17" M
IT戦記 - JavaScript の this について
WEB+DB PRESS 編集の R たんから、僕の連載記事に読者様から質問が来ていると教えていただいたので、その内容を教えていただきました。 以下、内容を転載 「JavaScriptわくわく開発道」の記事に関して質問です。 今回の内容で特に興味を持ったのはthisキーワードの振る舞いでした。 thisキーワードの説明には、オブジェクト型の変数を別の変数にコピーしてから初期化すると、コピーした変数からメソッドを実行できなくなるという例が紹介されていました。 そこには「（1）の時点でobj0には{}が入っているため、hogeは未定義となってしまう」という説明があるのですが、誌面の都合上省略があるためか、thisキーワードを用いることで問題を回避できるという理由がなかなか理解できないでいます。 自分なりに考えてみたところ、内部的には以下のようなことが起きているのではないかと思いました。 (1)
Ajax なライブラリを使いまくって、自分のサイトが重くなってしまったら：Goodpic
This shop will be powered by Are you the store owner? Log in here
miya2000の日記 - これからドラッグ＆ドロップを書く人のために
2012/07/22 追記 久しぶりに確認したところ、IE9 では以下で指摘している IE (このときは IE6 でした) の問題(3, 4, 6)がすべて解消されていました。 また、Firefox での問題(5)も Firefox14 で試したらは解消されていました(ただ、All-in-One Sidebar のパネルの上では mousemove イベントが発生しないようでした)。 Chrome20 や Safari5 でも問題無く動作していますから、現在においてドラッグ＆ドロップを実装するには mousedown 時の preventDefault() だけでOKと言えそうです。すばらしいですね！ safari で動かないらしいのでどなたか情報ください！(くやしい!) というかこういうのに勝ち負けはないので実装できてる方は是非トラックバックお願いします。当方既に ipod 中毒ですし
レイヤーを使用したFull Flash
最近PopUpに変わって需要の出てきたレイヤー。写真を載せるのはよくありますが、そのFlash版を誰でも簡単に使用できるスクリプトを組んでみました。 最近写真をレイヤーで見せるのが流行ってますよね。（POPUPブロックの影響によるPOPUP代わりみたいなものでしょうが。） そういうものはJavaScriptが結構公開されているのですが、FLASHはないですよね。（使用したもの自体、見ることもまだあまりないですね。） そういうわけで組んでみました。 まずは下記URLをご覧ください。 http://www.muraken.biz/overlay/overlayflash.html（”ここをクリック"のところをクリックしてみると、実行されます。） 今回、これを簡単に作れるスクリプトを組みました。 JavaScriptに関しては文末にてソースを置いておきますが、説明するとかなり長くなるので割愛いた
Life is beautiful: 複数のbookmarkletの機能を一つにまとめた「シオレット」
Bookmarkletの存在を知ってから、いくつか気に入ったものをインストールしたり、自分で作ってみたりして遊んで来たのだが、普通のウェブページへのリンクも含めて数が増えてくるとツールバーが一杯になってしまい、使い勝手がぐっと悪くなる。 そこで、いくつかのBookmarkletの機能を一つにまとめた、メタBookmarkletを自分のために作ったのだが、せっかくなので、ここで公開。名づけて「シオレット」だ（bookmark=しおり）。 【シオレットのインストールの仕方】 [シオレット] ← このリンクを右ボタンでクリックして「お気に入り/bookmark」として追加する。左ボタンでクリックしてしまうと、シオレットがこのページ上で動いてしまうので注意（その場合は、グレーの部分をクリックすればメニューを閉じることができる）。 追加する場所としては、Firefoxの場合は Bookmark To
JavaScript勉強会のまとめ | Blog hamashun.com
2007-07-12資料公開をした人の章にリンク追加 2007-07-12 sendさんの章に追記 超長いんでショートカットメニュー作りました。 あと、JavaScriptの素人が書いてます。 あちこち間違ってたらごめんなさい。 マークアッパー・デザイナー向けJavaScript入門 マークアップエンジニア・HTMLコーダー向け、Yahoo UI Library活用術 Google Gears入門 JSの使いどころ liveプレゼン 猿でもわかる GreaseMonkey Firebugの話 総括 Twitter関連でお世話になっているukstudioが、初心者向けJavaScript勉強会を主催してくれたので、モリモリ勉強してきました！ 会場は株式会社ノッキングオン様に提供して頂きました。 ありがとうございます！ 僕は行ってなかったんですけど、モバイル勉強会の時もお世話になったそうです。
いやなブログ: 配列操作の比較表: Ruby, Python, JavaScript, Perl, C++
配列操作の比較表: Ruby, Python, JavaScript, Perl, C++ プログラムを書いていると、他のプログラミング言語の記憶とごっちゃになって、「配列の後ろに要素を追加するのは push だっけ、 append だっけ」などと混乱することがあります。特に Ruby, Python, JavaScript はコードの書き方が似ているので、この問題が起きがちです。 そこで、備忘録として、 Ruby, Python, JavaScript, Perl, C++ の配列操作の比較表を作りました。一番慣れている Ruby を基準にしています。間違いなどがあったらご指摘いただけると助かります。他の言語のもあるといいなあ。 Ruby (Array) Python (list) JavaScript (Array) Perl (@) C++ (std::vector)
ページにクリッカブルなメールアドレスを載せつつスパム対策もする方法「Email Riddler」:phpspot開発日誌
ページにクリッカブルなメールアドレスを載せつつスパム対策もする方法「Email Riddler」 2007年02月14日- Dynamic Drive Email Riddler- email encryption script and tool Updated to version 2.0! Jan 28th, 07. Improved interface, output now XHTML valid, plus added ability to simply output encrypted email as a JavaScript variable. ページにクリッカブルなメールアドレスを載せつつスパム対策もする方法「Email Riddler」。 Eメールアドレスの画像化が進んでいますが、メールアドレスをいちいち打つのはやっぱり面倒。クリックでメールを送りたい、アドレスをコピー
prototype.jsを10KBにする方法
2006-11-20T14:20:42+09:00 追記 「何者か」に攻撃を受けて、このページの内容が差し変わっていました。あわててバックアップファイルから復旧しました（「何者か」 = 酒……）。 prototype.jsを10KBにする方法の続き（.htaccessをスマートに使う） : 亜細亜ノ蛾 に続きを書きました。合わせてどうぞ。 JavaScript ファイルを圧縮する 正真正銘、Prototype（“prototype-1.4.0.js”）を10キロバイト（10,453 bytes）に圧縮して、しかも（当たり前ながら）動作するようにする方法です。 ──と聞いて真っ先に思い浮かぶのが「各種JavaScriptファイル圧縮サービス」、という人も多いでしょう。 しかし、自分が試してみたところ、例えば/packer/で圧縮したJavaScriptファイルは上手く動作しませんでした（他は
Firebugの便利な組み込み関数 - 技術メモ帳
id:brazil さんのブックマークで知ったのだが、 Firebugには、便利な組み込み関数が定義されているようだ。 一通りさわってみたのだが、 $x() で 任意のXPath要素が取得できるのとかに感動した。 そして、やっぱりちゃんとドキュメント読むべきだなぁと思った。 XPathから要素を取得する。 $x("/html/body/h1"); -> 要素の配列が返ってくる。 selector名から要素を取得する。(getElementsByTagName) $$("h1") -> 要素の配列 所要時間測定 console#time, console#timeEnd time ~ timeEnd で囲んだ部分の所要時間を 計測することが出来るみたいで、 以下のような関数にまとめると良さそうだ。 function bench( callback ) { var uniq_id = Date
IT戦記 - 複雑で重くなった JavaScript を超高速化する方法。
以下のスクリプトを他のすべてのスクリプトよりも前に読み込む。 var nativeSetInterval = window.setInterval; _setInterval = {}; window.setInterval = function(process, delay) { var entry; if(typeof process == 'string') { entry = new _setInterval.Entry(function(){eval(process);}, delay); } else if(typeof process == 'function') { entry = new _setInterval.Entry(process, delay); } else { throw Error('第一引数が不正です。'); } var id = _setInterv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
JavaScriptを利用してフォームの二重送信を防止する：CodeZine