Born Neet

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

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

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

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

ソースは一覧用と記事用の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さんを使わせてもらいました。これちょー便利！

さっき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
なんか気になるので…。

先日公開した(x)html2presenで使ってみたie7-js 。
以下にその感想を。

設定したかったのは下の内容。
（プレゼンを常にブラウザ表示領域内最大に固定するというもの）

#presenArea {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

普通、IE6以下では上のcssは全く機能しない。
まず、fixed指定はもちろん無視される。
さらに、left-right、top-bottomの同時指定にも対応していない。

IE7.jsを使えば、そんな悩みを一気に解決してくれる･･･はずだったんだけど。

何故かfixedが効かない。
いろいろ試してみたところ、外部cssで指定するとうまく処理されないっぽい。
（style属性タグ内に書くとちゃんと固定された）

結局おなじみのexpressionでやることにした。
style属性タグをjsから操作するのは面倒いし、動的に生成してもIE7.jsが処理してくれるかわからないので。

* html #presenArea {
	position: absolute;
	top: expression(document.documentElement.scrollTop + 'px');
}

これで、無事解決とおもいきや、またも問題発生。
「'px'は宣言されていません」
いや、文字列リテラルなんですが？
どうやら、IE7.js内の処理でなんか起きてるらしい。

ってことで、

top: expression(document.documentElement.scrollTop);

に修正して解決。
（単位指定しないとまずくない？と思ったけど、IE7.js内でpx指定に変換されてる模様）

あと、たまに「a.clientWidthはnullまたはオブジェクトではありません」ってエラーも出るけど、それは僕が原因（HTMLがおかしいとか）っぽい。

初めてのIE7.jsはこんなんでした。
僕としてはけっこう便利だと思います。

ただ、cssに精通してる人達にとってはそうでもないのかなぁ、とも。
（おそらく今まで通りcss-hackを操る方が効率的でしょう）

※ ExplorerCanvasと同時に使ったのが原因ってことは…ないよなぁ。

[訂正 2008/01/23 23:20]
style属性ではなくスタイルタグ（要素）でした。（書き間違えました；）
混乱させてしまってすいませんm(_ _)m
style属性にはもともと対応してないっぽいです。
（一応試してみたらやっぱりバグりました…）