javascript

setAttributeとassignment to undeclared variable ~

まだメモ

<img src=”xxx.gif” style=”opacity: 0.2;” />

setAttributeはどうも曲者らしい
setAttributeが曲者じゃなくてIEが曲者か。
IEではclassとstyleとイベントを設定できないそうだ。
便利っぽいのにな残念。

Firefoxの警告

assignment to undeclared variable ~
varが無いよ

ヘッダーの背景画像をランダムに表示させたくなって知恵を絞る、の巻

先日追加したテンプレート(x-ran-zatsu)のヘッダー画像が何パターンかあるので
せっかくだから全部使ってしまおうと
ランダムで背景画像を表示するjavascriptを追加してみたら、これがうまくいかない。

うまくいかないといっても、htmlに使えば動くんだけど、wordpress(php)で読み込むと画像が消えてしまう。

これがその時書いたjavascriptで
読み込んだ時のミリ秒が奇数か偶数かで分岐させて、#headerの背景を差し替える。
phpで使う場合jsの読み込ませる場所が違うのかな?

関係ないけどキーボードの調子がすこぶる悪い。
文字側のenter(テンキー側のは反応する)やc,v,F7あたりが反応したり、しなかったり、延々と一文字が入力され続けたり。

さて、粘ってみたけど、うまい解決法も閃かないので別の方法を考える事にした。
せっかくwordpressでphpを使っているのだから、phpで出来ないかね?と辞書を片手にシコシコ書いてみたら、とりあえず動くだけというものだけど、出来たので手順を晒してみます。

続きを読む

JavaScriptでブラウザのレンダリングモードを調べる方法

アドレスバーにコピペしてエンター

レンダリングモードを調べる

標準準拠なら[CSS1Compat]?
後方互換なら[BackCompat]

IE8は3つのレンダリングモードがある

IE8 //8 これがデフォルト
IE7互換 //7
後方互換 //5

確認用

関係ないけど更新された時間を調べる

ブラウザやサーバーによって動作はマチマチらしい

ロールオーバーでimgをフェード

またもや前回の続き

次は、現在1個のidにしか対応してないので、対象の要素(とりあえずa?)が複数あれば勝手に全部対応できるようにさせる。

特定のid内のaに包まれたimgを対象にopacityを変化させるようにしてみた。
動作確認はこちら。

javascriptはcssと違って「子 > 親」を指定できるみたい、便利だ。

一応当初の目的は達成したけれど、次は、
別の画像を前面にalpha0で呼び出してからalphaを100に変更させるか、
背面に呼び出して前面の画像のalpha0に変更させるか、してクロスオーバーするマウスオーバーが出来たらいいなぁ

setIntervalからsetTimeoutへ

何から書こうかな

まず前回の続き

1.setIntervalで、イベントをonclickからonmouseover,onmouseoutに変更、等速から等加速運動に変更
http://sakurachiro.com/_exercise/javascript/timer/setInterval_opacity_1.html

setIntervalで呼び出す関数に引数を持たせたら動かない
これだとダメ

functionで呼び出したらok

引数はこれで解決したものの
setIntervalが同時に何個も呼ばれてしまい失敗。

2.上記に関数が動いてるかのチェックを追加
http://sakurachiro.com/_exercise/javascript/timer/setInterval_opacity_2.html

3.行き詰ったのでsetTimeoutを勉強してみる
http://sakurachiro.com/_exercise/javascript/timer/setTimeout_opacity_1.html

と、こんな感じまできた
次は、現在1個のidにしか対応してないので、対象の要素(とりあえずa?)が複数あれば勝手に全部対応できるようにさせる。

肝心のopacityは
CSS Validation Service|テキストエリアに直接入力して検証によると

プロパティ opacity は CSS レベル 2.1 に存在しませんが、[css3] に存在します

なんだけど、IE以外のブラウザ、opera/google chrome/safari/Firefox なんかはすでにopacityに対応してる。
IEは独自拡張のfilterをつかって対応

その場合hasLayoutをtrueにしておく必要があるみたい(clearfixみたいにzoom:1が影響がない?)
しかし独自拡張かぁ。
CSS3も先行実装なんだけど、いつか実装された時に修正なしで使えるのがいいおね。