JavaScript Archive

ネタがないのでだいぶ前に気になって調べたことをメモ。

prototype.jsには、

Field.present(element1, [element2, ..., elementN])

という、渡したフォーム要素の中に空白のものが残っていないかをチェックできるメソッドがあります。

いや、正確にはありました。
このメソッド、現在は

Field.present(element)

という単一の要素をチェックするものになっているようです。
つまり、以前と同じように使っちゃうと先頭の要素しかチェックされないのです。

以下ソースコードで検証。
（こういうの一度やってみたかった！）

prototype.js 1.4.0のField.presentメソッド

  present: function() {
    for (var i = 0; i < arguments.length; i++)
      if ($(arguments[i]).value == '') return false;
    return true;
  },

たしかに渡された要素全てについてチェックしています。
サンプル（by prototype.js ver 1.4.0 リファレンス）

prototype.js 1.5.0のField.presentメソッド

  present: function(element) {
    return $(element).value != '';
  },

こちらは単一の要素しかチェックしてません。
ので、期待した挙動にはなりません（prototype.js ver 1.5.0 リファレンス）。
最新版の1.6.0.2も同じでした。
Fieldのメソッドだから、意味的には今の方が正しいっぽいですね。（便利さは別として）

どうやらJavaScriptistで読み込まれてる1.5.0 rc0ぐらいまでは前者の処理だったようです。
Fieldのメソッドで複数の要素を処理するのはおかしいってことで修正されたんですかねぇ。

と、ダラダラ書いてきましたが、実は公式のドキュメントにはきちんと正しい挙動が書かれています。（おそらくバージョンアップ時にアナウンスもあったことでしょう）
やっぱり公式のドキュメントも見ようぜってことですかね。（整備されたのは1.5以降ですが…）
この他にも、返す結果が以前と変わってるメソッドがあるかもしれませんし。

以上、おそらく周知の事実なんでしょうが、日本語のリファレンスは昔のままのところが多いので一応書いてみました。
このメソッド自体あまり使われないかもしれませんが…。誰かのお役に立てれば幸いです。

[参考（本文でリンクしたもの以外）]

• prototype.js ver 1.6.0 リファレンス
• prototype.js v1.5.0 の使い方
• Index of /dist
  prototype.jsの古いバージョンはここにあります
• Prototype JavaScript framework: Download Prototype
  最新版はこちらから

[余談]

まぁjQueryばっかりでprototypeはめったに使わないですけどねぇ。
最近は、Developers Summit 2008 の資料を公開します。 - IT戦記で（意外にも？）オススメされてたExt.JSを一度ちゃんと使ってみなきゃなぁ、とか思ってます。

意味があるのかはわからないけど。

ショートカットキーの一覧は以下の通り。
（ヘッダ右上のキーボードアイコンにマウスオーバーしても表示されます）

一覧ページ（パーマリンク以外）

個別記事ページ（パーマリンク）

ソースは一覧用と記事用の2つです。（ページに合わせてどちらかをロードしてます）
今回もrequired jQueryです。

※ 実はスクロール関連の設定は何もしてなくて、完全にブラウザまかせだったりします…。

以上、お暇な方はポチポチっといじってみてくださいな。

Thanks

アルファ画像を扱うalphafilter.jsライブラリ[to-R]
デザイン素材.com 【無料Web素材・イラストアイコン・ライセンスフリー・商用利用可】

最初に表示される画像をランダムで選ぶようにした。

以下のようなソースを関数内の最後に追加すればOK。

var rand = Math.floor(Math.random() * length) * width;
body.css({ 'left': -rand });

これでいつ見ても同じ画像が表示されるということがなくなります。

※ ページ読み込み終了までは1枚目が表示されちゃうのが微妙だなぁ。
　　cssで1枚目も消すとjs無効時に何も表示されなくなるし…。
　　<noscript>使うしかないか？

アマゾンのスライドショーウィジェットがカッコよかったので使おうと思ったんだけど…
ブログのデザインを変更せずに導入できそうなサイズがなかったので（超）劣化版を作ってみた。

昨日から（パーマリンク以外のページの）サイドバー最上部に貼ってるやつです。

参考にしたのは、Accessible News Slider: A jQuery Plugin via アクセッシブルなスライダーjavascript「Accessible News Slider」（viaって1回言ってみたかった…）

初めはAccessible News Sliderをカスタマイズしようとしてたんだけど、オリジナルの作者が苦労したであろうアクセシブルな部分を削除していくうちに、申し訳ない気持ちで一杯になってきたのでイチから（jQueryには依存）作った。

ソースはクソ長くなっちゃったので続きにいれました。

[使い方]

なんて大袈裟なもんじゃないですが。

<div class="adSlide">
	<ul class="adBody">
		<li>1枚目の内容</li>
		<li style="display: none">2枚目の内容</li>
		<li style="display: none">3枚目の内容</li>
			：
			：
		<li style="display: none">n枚目の内容</li>
	</ul>
</div>

っていうHTMLをスライド表示します。
スライド上にマウスを移動させるとページ送りや全表示させるボタンが出てきます。

ちなみに、2枚目以降のdisplay: noneは任意です。
（ページ読み込み中やJavaScript無効時に全部のスライドが表示されるのを防ぐために指定してます。cssが無効だと…すいません、お手上げです。）
あと.adSlideの背景もあらかじめ設定しておくいいかもしれません。（僕の使ってる画像は続きに）

こんな感じです。
外部cssがいらないところが売りです（たぶん）。

あ！忘れてた。広告リンクの作成はG-Toolsさんを使わせてもらいました。これちょー便利！

Continue reading

さっきie7-jsのサイトを見てみたら、いつのまにか2.0(beta2)や2.0(beta3)なんてのが出てた。
で、早速試してみると、以前はできなかった外部cssでのposition:fixed;指定があっさりできた。

僕がブログをサボってる間に進化してたのかぁ･･･ん？

今度は、left-right&top-bottomの同時指定が効かなくなってる！（なんか大きさはそのままでセンタリングされちゃう）
今まで使ってたbeta1ではちゃんとboxが拡大されるのに…；

ってことで現時点では、外部cssでfixed使いたい時はbeta2か3で、left-right、top-bottomの同時指定をしたい時はbeta1を使うのがいいんじゃないかと。
どっちもやりたい僕はどうすれば…。

beta4に期待しつつ定期的にウォッチしておこう。

[余談]

なんでIE7.jsのサイトに行ったかというと、「ie7.js nullまたはオブジェクトではありません」っていうキーワードでこのブログ来てくれる人が結構いるようなので調べてみようと思ったからなんです。

前の記事を書いた時には、深く考えないで僕のhtmlがおかしいんだろうなと決めつけてたんですが、いろんな人が遭遇しているってことはそうじゃないのかもな…と。

で、肝心の原因なんですが、まだわかってません。
っていうかエラーの再現自体できてないんです；

誰かどんな状況で発生したとか教えて下さいm(_ _)m
なんか気になるので…。