気ままに綴る独学メモ帳
クリックした座標をposition:absoluteのtopまたはleftの数値に置き換えて、画面上に1pxの線を縦横ランダムに表示する。
ブラウザ（とその設定）によってwindow.open()の挙動が大分違う件について、手持ちのブラウザで検証してみた結果のメモ。
Googleのカスタム検索エンジンの検索ボックスと検索結果をページ内に埋め込む方法（オーバーレイではない）について。
Mapと同じくSearchもAPIで色々することが出来ます。
サイト内検索の検索ボックスをサイトに埋め込むのは、登録した時に作成されるコードを埋め込むだけなので簡単ですが
APIを利用する場合はJavascriptとAPIの仕様が分かってないとややこしいので、分からない人向けに説明を書いてみた。
この記事では、サイト内検索の検索ボックスと検索結果をAPIを利用して既存ページに埋め込む初歩についてまとめてます。
更に詳しいカスタマイズ方法 についてはDeveloper’s Guideなどを参照してください。
ロールオーバースクリプト（画像名のOn/Offで判別）とマウスオーバーでリンク画像の透明度とか変更を足してクラスにしてみた。
指定エリア以下のaタグ拾ってマウスイベントでロールオーバーする。
画像名に指定した文字列があれば置換、なければ透過処理。
ロールオーバーさせない指定はclass名の有無（imgタグ内）で判断する。
IE6のドキュメントタイプで表示が変わる互換性モードに頭を抱えたWeb業界の人は多かろうと思いますが、IE8で更に上位版が出たそうです。
でもIE6で悪行を働いた標準・互換モードの変更動作とは違い、IE8で導入されたドキュメント互換性は、
IEがページを表示する際に使用する特定のレンダリングモードの選択を可能にするもので、従来のDOCTYPEの変わりに
新しくMETA要素の X-UA-Compatible により操作が可能に。
簡単にまとめると
IE8だと表示が崩れる…IE7なら崩れないのに…orz
▼
METAタグでIE7モードで表示するよう指示
▼
IE8がその指示に従ってIE7っぽくレンダリング
▼
ｳﾏｰ(ﾟдﾟ)
ということらしい。
その場合のMETAタグは次のようになる（Emulate IE7 互換性モードを指定）
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
このメタタグはヘッダーの一番上（titleや他のmetaよりも上）に置かなければならない。
その他のcontent 属性値
<meta http-equiv="X-UA-Compatible" content="IE=4"/> <!-- IE5 mode --> <meta http-equiv="X-UA-Compatible" content="IE=7.5"/> <!-- IE7 mode --> <meta http-equiv="X-UA-Compatible" content="IE=100"/> <!-- IE8 mode --> <meta http-equiv="X-UA-Compatible" content="IE=a"/> <!-- IE5 mode -->
各モードをセミコロンで区切って複数のドキュメント モードを指定することも可能らしい。
特定の互換性モードを除外する使い方も可能だが、推奨はされていない。
例：IE7 モードを除外
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />
一見便利そうだけど…用途がわからん……
でもやっぱりメインで確認するのはIE6なんだろうな、っていう。
正規表現によるマッチング。location.hrefにmach()使ってドメイン部分を取り出す。
※表示の都合上、全角の「？」が混じっているので注意
var str = "http://www.google.co.jp/";
var domain = str.match(/^[httpsfile]+:\/{2,3}([0-9a-z\.\-:]+?):？[0-9]*?\//i)[1];
alert(domain);
変数domainは配列になり、domain[0]にはプロトコルからドメイン後ろのスラッシュまで、
domain[1]にはドメイン部分のみが格納されます。
変数strをlocation.hrefにすると、表示しているページのURIがマッチング対象になる。
必要に迫られて作ったIE Pingfix.jsのクローン
ページ内にある透過PNG形式画像をIEでも表示させるプラグインのmootools版です。
透過画像やAlphaImageLoaderについてはこっちの記事で詳しく書いてます→透過PNGと透過フィルターの使い方
適用する画像の判別はファイル名で行います。
背景は面倒なので未対応ですが、要素IDによる範囲指定が可能です。
やってる事は大体同じ
ジョジョの無駄ラッシュをブラウザ上で再現する無駄なmootoolsプラグイン。テキスト変えたらオラオララッシュも出来る。カイジ作ってるときにティンと来たのは言うまでもない。
mootoolsのRequestクラスを使うとXMLHttpRequestが簡単に行えます。
jQueryやprototype.jsもやり方は大体同じです。（クラスの名前からして似てる）
公式サイトのDemoにAjax.Requestのサンプルがいくつかありますが、
送受信だけでは面白くないので、簡単にファイルの読み書きをして掲示板っぽいものを作ってみようー。
▼用意するもの（カッコ内は説明とzipで使ってるサンプルの名前）
※文字コードは全てUTF-8にすること。
Step-by-Step形式で書いています。（全10ステップで2ページ分割）
Cookieで2重送信を防止する方法のサンプル。1ページ完結とかセッション使うほどではないスクリプトに。